forked from DGNum/gestioCOF
166 lines
4.6 KiB
Markdown
166 lines
4.6 KiB
Markdown
Stupid jQuery Table Sort
|
|
========================
|
|
|
|
This is a stupid jQuery table sorting plugin. Nothing fancy, nothing really
|
|
impressive. Overall, stupidly simple.
|
|
|
|
[View the demo here][0]
|
|
|
|
See the example.html document to see how to implement it.
|
|
|
|
|
|
Example Usage
|
|
-------------
|
|
|
|
The JS:
|
|
|
|
$("table").stupidtable();
|
|
|
|
The HTML:
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th data-sort="int">int</th>
|
|
<th data-sort="float">float</th>
|
|
<th data-sort="string">string</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>15</td>
|
|
<td>-.18</td>
|
|
<td>banana</td>
|
|
</tr>
|
|
...
|
|
...
|
|
...
|
|
|
|
The thead and tbody tags must be used.
|
|
|
|
Add a `data-sort` attribute of "DATATYPE" to the th elements to make them sortable
|
|
by that data type. If you don't want that column to be sortable, just omit the
|
|
`data-sort` attribute.
|
|
|
|
|
|
Predefined data types
|
|
---------------------
|
|
|
|
Our aim is to keep this plugin as lightweight as possible. Consequently, the
|
|
only predefined datatypes that you can pass to the th elements are
|
|
|
|
* `int`
|
|
* `float`
|
|
* `string` (case-sensitive)
|
|
* `string-ins` (case-insensitive)
|
|
|
|
These data types will be sufficient for many simple tables. However, if you need
|
|
different data types for sorting, you can easily create your own!
|
|
|
|
|
|
Creating your own data types
|
|
----------------------------
|
|
|
|
Creating your own data type for sorting purposes is easy as long as you are
|
|
comfortable using custom functions for sorting. Consult [Mozilla's Docs][1]
|
|
if you're not.
|
|
|
|
Let's create an alphanum datatype for a User ID that takes strings in the
|
|
form "D10", "A40", and sorts them based on the number.
|
|
|
|
<thead>
|
|
<tr>
|
|
<th data-sort="string">Name</th>
|
|
<th data-sort="int">Age</th>
|
|
<th data-sort="alphanum">UserID</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Joseph McCullough</td>
|
|
<td>20</td>
|
|
<td>D10</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Justin Edwards</td>
|
|
<td>29</td>
|
|
<td>A40</td>
|
|
</tr>
|
|
...
|
|
...
|
|
...
|
|
|
|
Now we need to specify how the **alphanum** type will be sorted. To do that,
|
|
we do the following:
|
|
|
|
$("table").stupidtable({
|
|
"alphanum":function(a,b){
|
|
|
|
var pattern = "^[A-Z](\\d+)$";
|
|
var re = new RegExp(pattern);
|
|
|
|
var aNum = re.exec(a).slice(1);
|
|
var bNum = re.exec(b).slice(1);
|
|
|
|
return parseInt(aNum,10) - parseInt(bNum,10);
|
|
}
|
|
});
|
|
|
|
This extracts the integers from the cell and compares them in the style
|
|
that sort functions use.
|
|
|
|
|
|
Callbacks
|
|
---------
|
|
|
|
To execute a callback function after a table column has been sorted, you can
|
|
bind on `aftertablesort`.
|
|
|
|
var table = $("table").stupidtable();
|
|
table.bind('aftertablesort', function (event, data) {
|
|
// data.column - the index of the column sorted after a click
|
|
// data.direction - the sorting direction (either asc or desc)
|
|
// $(this) - this table object
|
|
|
|
console.log("The sorting direction: " + data.direction);
|
|
console.log("The column index: " + data.column);
|
|
});
|
|
|
|
Similarly, to execute a callback before a table column has been sorted, you can
|
|
bind on `beforetablesort`.
|
|
|
|
See the complex_example.html file.
|
|
|
|
|
|
Data with multiple representations/predefined order
|
|
---------------------------------------------------
|
|
|
|
Often we find two distinct ways of offering data: In a machine friendly way,
|
|
and a Human-friendly way. A clear example is a Timestamp. Additionally,
|
|
arbitrary data values may already have a predefined sort order. In either case,
|
|
it's to our advantage to have a way to store the "sortable data" while letting
|
|
the viewer see the Human-friendly representation of that data. While the
|
|
purpose of the custom sort methods is to take data and make it sortable
|
|
(machine friendly), sometimes this is too hard or too expensive, computationally
|
|
speaking.
|
|
|
|
To solve this problem, you can specify a `data-sort-value` attribute to
|
|
table cells, and the attribute value will be the basis of the sort as opposed
|
|
to the text value of the table cell. See the complex_example.html file, where
|
|
we sort a column of letters based not on their alphabetical order, but by their
|
|
frequency in the English language. You'll still need to specify a sort type
|
|
or come up with your own custom sort function, but the presence of the
|
|
`data-sort-value` attribute tells the plugin to use the value of the
|
|
attribute as the basis of the sort.
|
|
|
|
|
|
License
|
|
-------
|
|
|
|
The Stupid jQuery Plugin is licensed under the MIT license. See the LICENSE
|
|
file for full details.
|
|
|
|
|
|
|
|
[0]: http://joequery.github.com/Stupid-Table-Plugin/
|
|
[1]: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/sort
|