Highly Customizable Table Sort Plugin With jQuery - Stupid Table

File Size: 118 KB
Views Total: 7037
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Highly Customizable Table Sort Plugin With jQuery - Stupid Table

Stupid Table is a lightweight yet highly customizable jQuery html table sorting plugin that makes any table columns sortable by custom data type you specify.

Features:

  • Specify the data type using 'data' attributes.
  • 4 built in data types: init, float, string and string-ins.
  • Click on the header cell to sort the table column.
  • You can also create your own data types.
  • Also allows to sort an html table column programatically.
  • 2 sorting direction: 'desc' and 'asc'.
  • Callback functions.

Installation:

# NPM
$ npm install stupid-table-plugin --save

# Bower
$ bower install stupid-table-plugin

Basic usage:

1. To use this plugin, include the JavaScript file stupidtable.js after jQuery library:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="stupidtable.js"></script>

2. Then initialize the plugin and the Stupid Table is ready for use.

$("table").stupidtable();

3. Specify the data type for each header cell using data-sort attribute as follows:

<thead>
  <tr>
    <th data-sort="int">int</th>
    <th data-sort="float">float</th>
    <th data-sort="string">string</th>
    <th data-sort="string-ins">string-ins</th>
  </tr>
</thead>

4. You're also allowed to sort the timestamps using 'data-sort-value' attribute:

<td data-sort-value="672537600">Jun 11, 2017</td>

5. Change the default sorting direction.

<th data-sort="int" data-sort-default="desc>int</th>

6. Create your own data types in the JavaScript as follows:

$("table").stupidtable({
  "int": function(a, b) {
    return parseInt(a, 10) - parseInt(b, 10);
  },
  "float": function(a, b) {
    return parseFloat(a) - parseFloat(b);
  },
  "string": function(a, b) {
    return a.toString().localeCompare(b.toString());
  },
  "string-ins": function(a, b) {
    a = a.toString().toLocaleLowerCase();
    b = b.toString().toLocaleLowerCase();
    return a.localeCompare(b);
  },
  "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);
  }
});

7. Call on a sortable td to update its value in the sort. This should be the only mechanism used to update a cell's sort value. If your display value is different from your sort value, use jQuery's .text() or .html() to update the td contents, Assumes stupidtable has already been called for the table.

$table_td.updateSortVal(24);

8. Execute a callback function after table sorting.

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)
  // data.$th - the th element (in jQuery wrapper)
  // $(this) - this table object
  console.log("The sorting direction: " + data.direction);
  console.log("The column index: " + data.column);
});

Changelog:

2019-12-06

  • JS lint

2017-10-12

  • Added NPM support

2017-07-11

  • Initial multicolumn sort implementation

2017-07-03

  • Updated internal representation of tables. Added will_manually_build_table setting.

2017-06-28

  • Added a new should_redraw setting that allows you to specify a function that can conditionally prevent the table from redrawing after a sort.

2017-06-26

  • data-sort-onload=yes now indicates to sort a column on load

2017-06-25

  • Subsequent calls to stupidsort() now work when same direction specified

This awesome jQuery plugin is developed by joequery. For more Advanced Usages, please check the demo page or visit the official website.