Tablesorter - Flexible client-side table sorting

Mar 28, 2014 in Tables 4930 views

Download

Overview
Documents
Demos

User Rating: 4.3/5 ( 2 votes)

Your Rating:

Introduction

tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell. It has many useful features including:

Multi-column sorting
Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time.
Support secondary "hidden" sorting (e.g., maintain alphabetical sort when sorting on other criteria)
Extensibility via widget system
Cross-browser: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+
Small code size

Getting started

To use the tablesorter plugin, include the jQuery library and the tablesorter plugin inside the <head> tag of your HTML document:

<script type="text/javascript" src="/path/to/jquery-latest.js"></script> 
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>

tablesorter works on standard HTML tables. You must include THEAD and TBODY tags:

<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>[email protected]</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table>

Start by telling tablesorter to sort your table when the document is loaded:

$(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
);

Click on the headers and you'll see that your table is now sortable! You can also pass in configuration options when you initialize the table. This tells tablesorter to sort on the first and second column in ascending order.

$(document).ready(function() 
    { 
        $("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} ); 
    } 
);

Configuration

tablesorter has many options you can pass in at initialization to achieve different effects:

Property	Type	Default	Description
cancelSelection	Boolean	true	Indicates if tablesorter should disable selection of text in the table header (TH). Makes header behave more like a button.
cssAsc	String	"headerSortUp"	The CSS style used to style the header when sorting ascending. Example from the blue skin: th.headerSortUp { background-image: url(../img/small_asc.gif); background-color: #3399FF; }
cssDesc	String	"headerSortDown"	The CSS style used to style the header when sorting descending. Example from the blue skin: th.headerSortDown { background-image: url(../img/small_desc.gif); background-color: #3399FF; }
cssHeader	String	"header"	The CSS style used to style the header in its unsorted state. Example from the blue skin: th.header { background-image: url(../img/small.gif); cursor: pointer; font-weight: bold; background-repeat: no-repeat; background-position: center left; padding-left: 20px; border-right: 1px solid #dad9c7; margin-left: -1px; }
debug	Boolean	false	Boolean flag indicating if tablesorter should display debuging information usefull for development.
headers	Object	null	An object of instructions for per-column controls in the format: headers: { 0: { option: setting }, ... } For example, to disable sorting on the first two columns of a table: headers: { 0: { sorter: false}, 1: {sorter: false} }
sortForce	Array	null	Use to add an additional forced sort that will be appended to the dynamic selections by the user. For example, can be used to sort people alphabetically after some other user-selected sort that results in rows with the same value like dates or money due. It can help prevent data from appearing as though it has a random secondary sort.
sortList	Array	null	An array of instructions for per-column sorting and direction in the format: [[columnIndex, sortDirection], ... ] where columnIndex is a zero-based index for your columns left-to-right and sortDirection is 0 for Ascending and 1 for Descending. A valid argument that sorts ascending first by column 1 and then column 2 looks like: [[0,0],[1,0]]
sortMultiSortKey	String	shiftKey	The key used to select more than one column for multi-column sorting. Defaults to the shift key. Other options might be ctrlKey, altKey. Reference: http://developer.mozilla.org/en/docs/DOM:event#Properties
textExtraction	String Or Function	simple	Defines which method is used to extract data from a table cell for sorting. Built-in options include "simple" and "complex". Use complex if you have data marked up inside of a table cell like: <td><strong><em>123 Main Street</em></strong></td>. Complex can be slow in large tables so consider writing your own text extraction function "myTextExtraction" which you define like: var myTextExtraction = function(node) { // extract data from markup and return it return node.childNodes[0].childNodes[0].innerHTML; } $(document).ready(function() { $("#myTable").tableSorter( {textExtraction: myTextExtraction} ); } ); tablesorter will pass a jQuery object containing the contents of the current cell for you to parse and return. Thanks to Josh Nathanson for the examples.
widthFixed	Boolean	false	Indicates if tablesorter should apply fixed widths to the table columns. This is useful for the Pager companion. Requires the jQuery dimension plugin to work.

JS Tutorial

Tablesorter - Flexible client-side table sorting

Introduction

Getting started

Configuration

Related Articles