How to make a table able to sort using Twitter bootstrap?

Question

I want to know how to make my table sortable using Twitter Bootstrap? What things should be considered?

Answer 1

You need to use jQuery and dataTable.js.

Let's look at an example:

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="example"> 

Display grid: to define the grid layout for DataTables controls, we previously used span8 elements to indicate half-width elements, but with 12 columns replaced in Bootstrap, we just need to switch to using span6. So, our DataTables initialization looks like this:

 $(document).ready(function() { $('#example').dataTable( { "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>" } ); } ); 

We also need to set a new class in the DataTables wrapper element, so that the form elements are displayed as inline and not as a block (for this we use the input and table length selectors. For this, we simply extend the "sWrapper" class parameter for the DataTable:

 $.extend( $.fn.dataTableExt.oStdClasses, { "sWrapper": "dataTables_wrapper form-inline" } ); 

Sorting Bootstrap v2 declined to support TableSorter as a table library, and as a result, the sorting classes were removed. Thus, we need to define our own sorting style, which we can do exactly the same as in our own DataTables CSS files (images are available in the DataTables zip file in media / images):

 table.table thead .sorting, table.table thead .sorting_asc, table.table thead .sorting_desc, table.table thead .sorting_asc_disabled, table.table thead .sorting_desc_disabled { cursor: pointer; *cursor: hand; } table.table thead .sorting { background: url('images/sort_both.png') no-repeat center right; } table.table thead .sorting_asc { background: url('images/sort_asc.png') no-repeat center right; } table.table thead .sorting_desc { background: url('images/sort_desc.png') no-repeat center right; } table.table thead .sorting_asc_disabled { background: url('images/sort_asc_disabled.png') no-repeat center right; } table.table thead .sorting_desc_disabled { background: url('images/sort_desc_disabled.png') no-repeat center right; } 

Clean Up Finally, there are two modifications to my CSS integration from file 1.4 to complete our style:

Remove width from dataTables_length and dataTables_filter classes. Updates in Bootstrap mean they are no longer needed. The table class that I had before had "margin: 1em 0;" but with the change, the visual flow is now better with "margin-bottom: 6px! important;"

Mark this link

Answer 2

There is a library that provides the ability to sort using loading tables.

Below is a demo on how to use it.

HTML:

 <table class="table table-bordered table-striped sortable"> <thead> <tr> <th data-defaultsign="month" data-sortcolumn="1" data-sortkey="1-1"> Date </th> </tr> </thead> <tbody> <tr> <td data-dateformat="DM-YYYY">16.4.2004</td> </tr> <tr> <td data-dateformat="DM-YYYY">6.7.2002</td> </tr> <tr> <td data-dateformat="DM-YYYY">4.4.2004</td> </tr> <tr> <td data-dateformat="DM-YYYY">6.6.2012</td> </tr> </tbody> </table> 

JS:

 (function () { var $table = $('table'); $table.on('sorted', function () { console.log("Table was sorted."); }); }()); 

NTN.