jQuery - simple table sort
This is a simple plugin for jQuery, which adds the capability of sorting rows of your tables by your own rules.
Basic usage
The easiest way to start off is:
<script src="jquery.js"></script> <script src="jquery.simpleTableSort.js"></script>$(function() { $('#myTable').simpleTableSort(); });You have to adjust your table slightly, so that the plugin knows how to sort your rows:
<table id="myTable"> <thead> <tr> <th class="sort-numeric">Id</th> <th class="sort-alphabetical">Name</th> <th class="sort-date">Birth date</th> <th class="sort-float">Height</th> </tr> </thead> <tbody> <!-- lots of data --> </tbody> </table>Just add one of the following built-in sort methods as class to your th tag:
sort-alphabetical: Sorts data by alphabet (case ignored)sort-numeric: Sorts data by numeric valuessort-date: Sorts data by date (Note: relies on JavaScript built-inDateobject. Has to be compliant to RFC2822 Section 3.3)sort-float: Sorts data by floating point values
When a column is clicked a class name is appended: sort-asc or sort-desc.
So when clicking on the column "Id" with default options the modified th tag looks like this:
<!-- first click --> <th class="sort-numeric sort-asc">Id</th> <!-- second click --> <th class="sort-numeric sort-desc">Id</th>Advanced usage
You can easily configurate the plugin with omitting an object like this
$('#myTable').simpleTableSort({ order: 'asc', // ... });Options
| Option | Type | Default | Description |
|---|---|---|---|
prefix | string | "sort" | Changes the prefix of the used css classes in the plugin. These classes will be appended to the head columns to determine in which sort state they were ('asc' or 'desc'). If the prefix 'sort' is already used in your project you can change this value. |
order | string | "asc" | The sort order in which the table rows will be sorted on first sort. Possible values:
|
dynamic | bool | false | If the table is dynamic, meaning the table gets updated by AJAX or something else, this setting should be set to true. Otherwise the initial table data is restored. This is for performance reason: If it's a static table the rows don't have to be reprocessed every sort change. |
multiSortStates | bool | false | With this option set to true the state classes (e.g. 'sort-asc' and 'sort-desc') won't be removed when a different column is sorted.However, the last sort state is never 'forgotten', it will always be the opposite of the last sorted (or the default) |
autoSort | int | null | Adds the possibility to sort the table entries when the table is created. Accepts index values of table head column (zero-based). |
sortMethods | object | {} | You can extend the built-in sort methods with your own ones here. Example: Change "dd-mm-yyy" formatted date to JavaScript compatible "mm-dd-yyyy": sortMethods: { myDate: function(a, b) { a = a.split('.'); a = a[1]+'.'+a[0]+'.'+a[2]; To sort by this new method you can add this as css class to your th tag: <th class="sort-myDate">My date</th>(Don't forget to change the prefix, if you changed it via option prefix) |
fixTableHead | bool | false | If you have no control over the table structure and it lacks of a table head, then set this value to true and the first row of your table will be treatened as table head column |
excludeSortColumns | array | [] | Table head columns can be excluded from to be sorted by adding the index. Example which excludes the second row (zero-based): excludeSortColumns: [ 1 ]Example which excludes the first and the last row: excludeSortColumns: [ 0, -1 ](Negative values means to start from the end of the columns) |
onBeforeSort | Event | empty | coming soon... |
onAfterSort | Event | empty | coming soon... |
License
This plugin is licensed under the MIT license.
See MIT-LICENSE.txt
