jQuery Table Sorter

A simple, customizable and read to use jquery plugin to sort tables

Basic Usage:

The basic usage of jQuery Table Sorte are discribed bellow, in this example all table headers are sortable.

Qty	City	State
1	Jacarepaguá	RJ
1	São Luís	MA
16	Rio de Janeiro	RJ
2	São Paulo	SP

<script src="path_to_jquery/jquery.min.js"></script>
<script src="path_to_plugin/jquery-table-sorter.js"></script>
/**
 * This will make all tables sortable by it headers (th)
 */
<script type="text/javascript">
	(function ( $ ) {
		$( 'table' ).TableSorter();
	} ( jQuery ));
</script>

Default Options

<script type="text/javascript">
(function ( $ ) {
    // this is the same of $( 'table' ).TableSorter();
    $( 'table' ).TableSorter({
        columns     : 'th',
        icon_class  : 'ts-sort-indicator',
        arrows      : { 
             up : '&#x25B4;', 
             down : '&#x25BE;' 
        }
   });
} ( jQuery ));
</script>

Specifying columns to be sortable

jQuery Table Sorter plugin can be configured to make some (not all) columns sortable, just pass the column(s) selector to plugin.

Qty	City	State
1	Jacarepaguá	RJ
1	São Luís	MA
16	Rio de Janeiro	RJ
2	São Paulo	SP
67	Jaraguá do Sul	SC

/**
* This will make only columns with the class '.sortable' sortable.
* In this case the 2nd column
*/
<script type="text/javascript">
   (function ( $ ) {
	   $( 'table' ).TableSorter({
		   columns: '.sortable'
	   });
   } ( jQuery ));
</script>

Changing sort icon indicator

You can tell to jQuery Table Sorter plugin wich sort icon you like to use. Just pass the arrows param to the plugin call. with html code.

Qty	City	State
1	Jacarepaguá	RJ
1	São Luís	MA
16	Rio de Janeiro	RJ
2	São Paulo	SP
5	São Paulo	SP
31	Maringá	PA
67	Jaraguá do Sul	SC

  /**
    * Changing sort indicator icon
    * To double arrows
    */
   <script type="text/javascript">
       (function ( $ ) {
           $( 'table' ).TableSorter({
                arrows: { 
                    up:  '&uArr;', 
                    down: '&dArr;' 
                }
           });
       } ( jQuery ));
   </script>

Changing sorting icon css class

By default jQuery Table Sorter plugin wraps sort indicator icon with a <span></span> with css class ts-sort-indicator. To change default css class just pass the option icon_class to the plugin call. See example:

Qty	City	State
1	Jacarepaguá	RJ
1	São Luís	MA
16	Rio de Janeiro	RJ
2	São Paulo	SP
31	Maringá	PA
67	Jaraguá do Sul	SC

<style>
	.my-icon-css-class {
		display: inline-block;
		background: red;
	}
</style>
<script type="text/javascript">
   (function ( $ ) {
	   $( 'table' ).TableSorter({
		   icon_class: 'my-icon-css-class'
	   });
   } ( jQuery ));
</script>