Stupid jQuery Table Sort
This is a stupid jQuery table sorting plugin. Nothing fancy, nothing really impressive. Overall, stupidly simple. Requires jQuery 1.7 or newer.
See the examples directory.
npm
Installation via$ npm i stupid-table-plugin
Installation via Bower
$ bower install jquery-stupid-table
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!
Data with multiple representations/predefined order
Stupid Table lets you sort a column by computer friendly values while displaying
human friendly values via the data-sort-value
attribute on a td element. For
example, to sort timestamps (computer friendly) but display pretty formated
dates (human friendly)
<table>
<thead>
<tr>
<th data-sort="string">Name</th>
<th data-sort="int">Birthday</th>
</tr>
</thead>
<tbody>
<tr>
<td>Joe McCullough</td>
<td data-sort-value="672537600">April 25, 1991</td>
</tr>
<tr>
<td>Clint Dempsey</td>
<td data-sort-value="416016000">March 9, 1983</td>
</tr>
...
...
...
In this example, Stupid Table will sort the Birthday column by the timestamps
provided in the data-sort-value
attributes of the corresponding tds. Since
timestamps are integers, and that's what we're sorting the column by, we specify
the Birthday column as an int
column in the data-sort
value of the column
header.
Default sorting direction
By default, columns will sort ascending. You can specify a column to sort "asc" or "desc" first.
<table>
<thead>
<tr>
<th data-sort="float" data-sort-default="desc">float</th>
...
</tr>
</thead>
</table>
Sorting a column on load
If you want a specific column to be sorted immediately after
$table.stupidtable()
is called, you can provide a data-sort-onload=yes
attribute.
<table>
<thead>
<tr>
<th data-sort="float" data-sort-onload=yes>float</th>
...
</tr>
</thead>
</table>
Multicolumn sorting
A multicolumn sort allows you to define secondary columns to sort by in the
event of a tie with two elements in the sorted column. See examples/multicolumn-sort.html.
Specify a comma-separated list of th identifiers in a data-sort-multicolumn
attribute on a <th>
element. An identifier can be an integer (which represents
the index of the th element of the multicolumn target) or a string (which
represents the id of the th element of the multicolumn target).
int | float | string |
---|---|---|
1 | 10.0 | a |
1 | 10.0 | a |