adding sorting ability to bootstrap table
Current version: 1.10.0
In fact, it can be used for any tables.
Sorting provided by TinySort. Date parsing provided by moment.js.
Available for download with NuGet, search for bootstrap-sortable.
Working demo.
For compatibility issues with older browsers and possible workarounds, please look into the issues list.
####Dependencies: You should add the provided "moment.js" library, or get yourself a copy from http://momentjs.com.
####Basic usage:
Add references to bootstrap-sortable.css and bootstrap-sortable.js to your page. Add class "sortable" to your bootstrap table.
HTML table has to be properly formated, using <thead>, <th> and <tbody> elements.
You can disable sorting for a column by using data-defaultsort='disabled' attribute in the <th> element.
When you add table rows or whole table from client side, use $.bootstrapSortable(applyLast) function to add sortability to parts/tables that were not present at document.ready.
Use optional paramater applyLast=true if you want to preserve the last used sorting.
After sorting a column, the table triggers an event sorted.
####Cell with colspan and multiple header rows:
When you have multiple header rows, all header cells in the same column can be used to sort that column.
When you have cell with colspan, by default, the first column of the span will be sorted. You can override this by using data-mainsort attribute for the column that you want to be sorted with the colspan cell.
####Sorting direction signs: You can choose the sign that show the sort direcion. Default is the arrow pointing towards the heigher value.
This proved to be contra-intuitive for some, so you can change it to opposite using the second parameter: $.bootstrapSortable(applyLast, 'reversed').
Other possible values are 'az', 'AZ', '_19', 'month'. (See demo to see how it looks.)
You can set individual signs for each column using data-defaultsign attribute in the <th> element.
#####Alternative way of styling the sorting signs:
Set data-defaultsign='nospan' and set a class on <th> elements. Then the sorting signs will be shown using :after pseudoelement on <th>. This can be seen on the first column in the demo page.
For this purpose, sorted column headers have classes up, down and nosort respectively and all previous styles are supported.
You can also do your own styling in css.
####Optional attributes:
You can preset one column to be sorted when table is loaded using data-defaultsort attribute:
<th> Column 1</th>
<th> Column 2</th>
<th data-defaultsort="desc"> Column 3</th>To change the initial direction when sorting a column for the first time, use the data-firstsort attribute:
<th> Column 1</th>
<th> Column 2</th>
<th data-firstsort="desc"> Column 3</th>You can change the value that is used for sorting for each <td> using data-value attribute:
<td data-value="5.45">5,45</td>You can sort dates, even if they are in different formats. Specify date formats according to moment.js documentation. This only works if you include any version of Moment.js. If Moment.js is not found it will fallback to the usual sorting.
<td data-dateformat="YYYY-MM-DD">2013-06-24</td>
<td data-dateformat="DD-MMM-YYYY">26 June 2013</td>