Sorting tables by various headings based on the information in each column - Addressing a previous question about table organization

Question

This was a question that was previously asked:

How can I implement CSS table sorting based on different headings in the table?

and this was the accepted solution:

$("#<ID_OF_YOUR_TABLE").dataTable();

Here is a working fiddle with the solution:

Now, my question is:

How can I remove elements like "show xxx entries," search bar, "Showing 1 to 3 of 3 entries," and "previous" and "next" buttons from this fiddle?

EDIT: Additionally, how can I display all entries (150) on one page only?

Answer 1

Answer №1

Make a change:

$("#tbl1").carousel();

to:

$("#tbl1").carousel({"interval": 3000,"pause": "hover", 'wrap': true});

Take a look at this Demo

Answer 2

Make a change:

$("#tbl1").carousel();

to:

$("#tbl1").carousel({"interval": 3000,"pause": "hover", 'wrap': true});

Take a look at this Demo

Answer 3

If you want to quickly hide certain elements, a simple CSS trick can do the job:

.dataTables_filter, .dataTables_length,
.dataTables_info, .dataTables_paginate {
    display: none;
}

To show all 150 rows at once, you can utilize the 'iDisplayLength' option:

$(document).ready( function() {
    $('#example').dataTable( {
       "iDisplayLength": 150
  } );
})

Here's an example for reference: http://jsfiddle.net/5v4Rd/

Answer 4

If you want to quickly hide certain elements, a simple CSS trick can do the job:

.dataTables_filter, .dataTables_length,
.dataTables_info, .dataTables_paginate {
    display: none;
}

To show all 150 rows at once, you can utilize the 'iDisplayLength' option:

$(document).ready( function() {
    $('#example').dataTable( {
       "iDisplayLength": 150
  } );
})

Here's an example for reference: http://jsfiddle.net/5v4Rd/