Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Mootools class to add click-to-sort capability to any table.

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 Demo
Octocat-spinner-32 Docs
Octocat-spinner-32 ScreenShots
Octocat-spinner-32 Source
Octocat-spinner-32 README.md
Octocat-spinner-32 package.yml
README.md

TableSorter

Screenshot

Add click-to-sort capability to any table.

Supports sorting by numbers, strings, dates, checkboxes, and input values.

How to Use

A table can be set up for sorting just by passing the table element (or its ID) to the TableSorter constructor:

#HTML
<table id="dataTable">
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Balance</th>
    <th>DatAdded</th>
  </tr>
  ... table data ...
</table>

#JS
var tableSorter = new TableSorter('dataTable');

To enable the more specialized data-type awareness for sort comparisons, we explicitly name them as an option:

#JS
var tableSorter = new TableSorter('dataTable', { columnDataTypes: 'int, string, money, date' });

To enable persistent sort state for this column (via cookie), we supply a cookie name:

#JS
var tableSorter = new TableSorter('dataTable', { cookieName: 'tableSortState' });

Tables should be styled via CSS however you usually would style them, but TableSorter suggests adding two more classes to visually highlight columns which are sorted:

#HTML
table th.sortAsc {
    background:         #a8d4e3 url(../images/headerRowBGSortAsc.png) 100% 0 repeat-x;
    color:              #fff;
}
table th.sortDesc {
    background:         #a8d4e3 url(../images/headerRowBGSortDesc.png) 100% 0 repeat-x;
    color:              #fff;
}

TableSorter Options

There are a few options of TableSorter to customize its behavior:

  • columnDataTypes allows you to give hints as to how data should be interpreted for sorting purposes. Can be supplied by either array or comma-separated list.
  • sortDirection and sortColumn control the initial state. sortColumn is an index into the collection of columns, and sortDirection is either 'asc' or 'desc'.
  • headerRowCount and rowsPerRecord give hints about the structure of your table (both default to 1, and in mose cases this is correct).
  • headerAscClass and headerDescClass are class names for CSS styling purposes.
  • cookieName and cookieDays control persistent sort state (which cookie to save as and for how long). By default sort state is not saved, so this must be supplied for persistence.
  • includeTitles, titleFormula and titleSet control how titles appear (hover over tool tips--by default "Sort by [columnName]").
  • footerRowClass and exemptRowClass are the class names for TR elements which should be ignored for sorting purposes.
  • dateParseFunction allows you to override the native Date.parse function, nice if you have dd/mm/yyyy dates when your system expects mm/dd/yyyy.

Dependencies

core:1.4.2/Events
core:1.4.2/Options
Something went wrong with that request. Please try again.