Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Plugin that allows you to easily add the ability to sort an HTML table's data rows by clicking on the header of any given column.
JavaScript
Branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
css/default
img/default
README.md
example.html
jquery-1.7.2.min.js
jquery.sortableTable.js
jquery.sortableTable.src.js
underscore.js

README.md

jQuery Sortable Table Plugin

Allows the user to sort the rows of an HTML <table> based on the text inside the cell corresponding to the column header that is clicked.

Cross-platform Compatibility

  • Firefox 3+
  • Webkit (Google Chrome, Apple's Safari)
  • Internet Explorer 7+
  • Opera

Requirements

  • jQuery 1.7.0+
  • underscore.js

Feature Overview

  • Can handle up to 3 levels of nested data
  • Supports sorting by numeric and string values
  • Can exclude sets of rows from the set of sortable rows

Usage

Create a regular <table> widget in HTML. Override any CSS styles needed for your theme. If your table is showing grouped data, each group level requires a data-level attribute on the <tr> row. The data-level attribute must be an integer between 1 and 3 (inclusive). This will assume that your table, by default, is showing your grouped data in the correct order.

Requires that your header row uses <th> tags rather than <td> tags.

Simply call .sortableTable() on your jQuery extended <table> element, and you'll be able to sort on each column by clicking on the <th> header cell for a given column.

Required options:

  • image_base location of directory where images are located

You can re-initialize the table's sort, say because the table was updated with new rows, by calling .sortableTable() on your jQuery extended <table> element with the method name 'reinit' as the first argument, rather than a set of options.

Example

<table id="grouping_example_table">
    <tr>
        <th>State Name</th>
        <th data-sort-type="numeric">Number of Respondents</th>
    </tr>
    <tr data-level="1">
        <td colspan="2"><b>Division:</b> New England</td>
    </tr>
    <tr data-level="2">
        <td>Connecticut</td>
        <td>4</td>
    </tr>
    <tr data-level="3">
        <td>06010</td>
        <td>1</td>
    </tr>
    <tr data-level="3">
        <td>06790</td>
        <td>2</td>
    </tr>
    <tr data-level="3">
        <td>06512</td>
        <td>1</td>
    </tr>
    <tr data-level="2">
        <td>Massachusetts</td>
        <td>4</td>
    </tr>
    <tr data-level="3">
        <td>02130</td>
        <td>1</td>
    </tr>
    <tr data-level="3">
        <td>01002</td>
        <td>1</td>
    </tr>
    <tr data-level="3">
        <td>02721</td>
        <td>1</td>
    </tr>
    <tr data-level="3">
        <td>01830</td>
        <td>1</td>
    </tr>
    <tr data-level="2">
        <td>Maine</td>
        <td>3</td>
    </tr>
    <tr data-level="3">
        <td>04240</td>
        <td>1</td>
    </tr>
    <tr data-level="3">
        <td>04401</td>
        <td>2</td>
    </tr>
    <tr data-level="2">
        <td>New Hampshire</td>
        <td>0</td>
    </tr>
    <tr data-level="2">
        <td>Rhode Island</td>
        <td>1</td>
    </tr>
    <tr data-level="3">
        <td>02910</td>
        <td>1</td>
    </tr>
    <tr data-level="2">
        <td>Vermont</td>
        <td>0</td>
    </tr>
    <tr data-level="1">
        <td colspan="2"><b>Division:</b> Middle Atlantic</td>
    </tr>
    <tr data-level="2">
        <td>New Jersey</td>
        <td>150</td>
    </tr>
    <tr data-level="3">
        <td>08062</td>
        <td>50</td>
    </tr>
    <tr data-level="3">
        <td>07481</td>
        <td>25</td>
    </tr>
    <tr data-level="3">
        <td>08534</td>
        <td>30</td>
    </tr>
    <tr data-level="3">
        <td>07013</td>
        <td>45</td>
    </tr>
    <tr data-level="2">
        <td>New York</td>
        <td>165</td>
    </tr>
    <tr data-level="3">
        <td>10701</td>
        <td>20</td>
    </tr>
    <tr data-level="3">
        <td>11530</td>
        <td>20</td>
    </tr>
    <tr data-level="3">
        <td>10005</td>
        <td>15</td>
    </tr>
    <tr data-level="3">
        <td>10606</td>
        <td>30</td>
    </tr>
    <tr data-level="3">
        <td>10021</td>
        <td>75</td>
    </tr>
    <tr data-level="3">
        <td>14420</td>
        <td>5</td>
    </tr>
    <tr data-level="2">
        <td>Pennsylvania</td>
        <td>420</td>
    </tr>
    <tr data-level="3">
        <td>15012</td>
        <td>105</td>
    </tr>
    <tr data-level="3">
        <td>16504</td>
        <td>100</td>
    </tr>
    <tr data-level="3">
        <td>17109</td>
        <td>120</td>
    </tr>
    <tr data-level="3">
        <td>19010</td>
        <td>95</td>
    </tr>
    <tr data-level="1" id="west_south_central">
        <td colspan="2"><b>Division:</b> West South Central</td>
    </tr>
    <tr data-level="2">
        <td>Arkansas</td>
        <td>0</td>
    </tr>
    <tr data-level="2">
        <td>Louisiana</td>
        <td>3</td>
    </tr>
    <tr data-level="3">
        <td>70123</td>
        <td>1</td>
    </tr>
    <tr data-level="3">
        <td>70131</td>
        <td>1</td>
    </tr>
    <tr data-level="3">
        <td>70817</td>
        <td>1</td>
    </tr>
    <tr data-level="2">
        <td>Oklahoma</td>
        <td>6</td>
    </tr>
    <tr data-level="3">
        <td>74820</td>
        <td>1</td>
    </tr>
    <tr data-level="3">
        <td>73505</td>
        <td>5</td>
    </tr>
    <tr data-level="2">
        <td>Texas</td>
        <td>570</td>
    </tr>
    <tr data-level="3">
        <td>75063</td>
        <td>100</td>
    </tr>
    <tr data-level="3">
        <td>76180</td>
        <td>50</td>
    </tr>
    <tr data-level="3">
        <td>75057</td>
        <td>420</td>
    </tr>
</table>

<script type='text/javascript'>
    $(document).ready(function() {
        $('table#grouping_example_table').sortableTable({image_base:'img/default',
                                                         rows_to_anchor:'#west_south_central'});
    });
</script>
Something went wrong with that request. Please try again.