Stupid jQuery Table Sort

This is a stupidly simple, absurdly lightweight jQuery table sorting plugin. As long as you understand basic JavaScript sorting, you can make this plugin do as much or as little as you want.

Here's an example. Click a header to sort the table by that column.

  $("#simpleTable").stupidtable();

<table id="simpleTable">
    <thead>
        <tr>
        <th data-sort="int">int</th>
        <th data-sort="float">float</th>
        <th data-sort="string">string</th>
        </tr>
    </thead>
    <tbody>
  ...
  ... (rest of the table)

The full source for the example can be located in the repo.

A slightly more complex example for fun.

Most table sorting plugins try to account for a limitless number of data types and their limitless ways of being presented. This leads to an extremely bloated code base with only a tiny portion of the code ever used by your project.

This plugin avoids that issue by letting you define your own ways of sorting table columns. The plugin internally recognizes "int", "string", and "float", so simple data tables will take very little effort on your part. See the README for more details.

Here's how we created a custom data type to sort dates in the format seen in the example above.

var date_from_string = function(str){
    var months = ["jan","feb","mar","apr","may","jun","jul",
    "aug","sep","oct","nov","dec"];
    var pattern = "^([a-zA-Z]{3})\\s*(\\d{2}),\\s*(\\d{4})$";
    var re = new RegExp(pattern);
    var DateParts = re.exec(str).slice(1);

    var Year = DateParts[2];
    var Month = $.inArray(DateParts[0].toLowerCase(), months);
    var Day = DateParts[1];
    return new Date(Year, Month, Day);
}

var table = $("#complexTable").stupidtable({
    "date":function(a,b){
        // Get these into date objects for comparison.
        aDate = date_from_string(a);
        bDate = date_from_string(b);

        return aDate - bDate;
    }
});

<table id="complexTable">
  <thead>
    <tr>
      <th data-sort="int" class="awesome">int</th>
      <th data-sort="float">float</th>
      <th data-sort="string">string</th>
      <th>Can't sort me!</th>
      <th data-sort="date">date</th>
      <th data-sort="int">Letter frequency</th>
    </tr>
  </thead>
  ...
  ... (rest of the table)

The source for this example can also be found in the repo.

Sometimes data is too complex to just call Array.sort on. Creating a data type, while seemingly daunting from the example, serves as an effective way to let you have complete control over how you want your data to be sorted.

Callbacks

The complex table above uses a custom callback to add an arrow to the table headers after the table is sorted. To execute a callback after the table is sorted, bind on the 'aftertablesort' event. Here's how the arrow effect was achieved:

var table = $("#complexTable").stupidtable({
    // Sort functions here
});

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)

    var th = $(this).find("th");
    th.find(".arrow").remove();
    var arrow = data.direction === "asc" ? "↑" : "↓";
    th.eq(data.column).append('<span class="arrow">' + arrow +'</span>');
});

Similarly, you can also bind on 'beforetablesort' to execute a callback before the sort actually takes place when a column is clicked.

Refer to complex_example.html in the repo.

data-sort-value

If you have data in both a machine friendly form and human friendly form, you can provide the machine friendly value to data-sort-value on table cells. The plugin will sort by the value provided but display the human friendly form to the user. For example, consider a to-do list table with a "Due Date" column. You can have nice, human friendly due dates such as "A week from today" if you specify a data-sort-value attribute of a timestamp.

<th data-sort="int">Due Date</th>
...
...
<td data-sort-value="1335798463">A week from today</td>