Tablesorter Installation Detailed HOW TO

Hi, Dear Readers.
Today I will explain HOW TO INSTALL TABLESORTER Plugin.
For real, the basic is very easy to install.
In case You need to install also pager, make sure you read also next article: TableSorter Pager plugin tutorial and settings also written by me.

Let's We begin
As usual we will start with data gathering and proceed.

Data Gathering Download the Tablesorter plugin from here: Tablesorter

Download Tablesorter's Default CSS from here: Tablesorter's CSS, later on you can change the look&feel as you wish

And the images used for styling: Here
And here -> ASC Image
And here -> DESC Image


Well, At this point we got all information that we need for beginning with tablesorter plugin. As i told it is very easy and very extendable.


Prepare Data
Place your fresh downloaded images into the images directory and adjust the CSS to point to images and read them.
Place your tablesorter.js into the directory you keep javascript files in (assume js)
Place your css file into css folder (we assume css)


Tablesorter Installation
We assume that we want to setup tablesorter plugin at index.html
We also assume that you have jQuery previously installed on this page.
Place your tablesorter.js into page, we prefer before (body end)
Place your CSS file in the head of the page (between and tags)
My file currently looks like that:

   
   


   

      

 

    
Name
 
      
      

 

    
Student01
        
 

    
Student01
        
      
      

 

    
Name
 
      
   

   
   

This example shows how to instantiate a basic instance of tablesorter, the reason to use only 2 values is to test it quick if it works with string values and sorts as expected. after such quick "DRY" Run, you can begin adding/generating data into table.
But do it ONLY AFTER You ensure that this works with basic example.


Tablesorter Options/Settings
Here i take the clear descriptions from tablesorter, but these that may be hard for you to undesrtand - i will explain deeply.

/**
 * cssHeader -> optional parameter. You can support here class name that will 
 * be applied to  tag inside header (inside ).
 * Description taken from Tablesorter
 **/
cssHeader: "header",

/**
 * cssAsc -> optional parameter, You can support class name to be applied to a
 * heading  element when sorting ASC mode.
 */
cssAsc: "headerSortUp",

/**
 * cssDesc -> optional parameter, You can support class name to be applied to a
 * heading  element when sorting DESC mode.
 */
cssDesc: "headerSortDown",

/**
 * cssChildRow -> unknown parameter for me, never used =) Touches some of the css
 * That long i worked with tablesorter, never used it - I believe you won't use it
 * too, at least at this time. :)
 */
cssChildRow: "expand-child",

/**
 * sortInitialOrder -> optional parameter saying order type in time of instantiation 
 * ascending/descending, possible values is "asc" or "desc", by default "asc".
 */
sortInitialOrder: "asc",

/**
 * sortMultiSortKey -> optional parameter to redefine the key to hold to select
 * multiple fields for sorting. default "shiftKey"
 * this one is a bit problematic ;)
 */
sortMultiSortKey: "shiftKey",

/**
 * sortForce -> optional parameter -> array containing forced sorting rules.
 */
sortForce: null,

/**
 * sortAppend -> optional, This option let's you specify a default sorting rule,
 * which is appended to user-selected rules (sortForce)
 */
sortAppend: null,

/**
 * String textExtraction (optional) A string of the text-extraction
 * method to use. For complex html structures inside td cell set this
 * option to "complex", on large tables the complex option can be slow.
 * Default value: "simple"
 */
textExtraction: "simple",

/**
 * Widgets -> optional parameter, allows you to specify widgets to be applied to
 * current tablesorter instance
 */
widgets: [],

/**
 * widgetZebra -> optional these params is a CSS classes for odd and even for 
 * applied widget "zebra"
 */
widgetZebra: {css: ["even", "odd"]}, 

/**
 * headers -> optional allows you to tell the sorter whether to sort specified field
 * or not, if yes which sorter to apply to it, sort order, etc. very useful param
 * example: $('#domelement').tablesorter({headers: { 
 *                   0: { sorter: false}, 
 *                   1: {sorter: false} 
 *                   }
 *          });
 */
headers: {}, 

/**
 * widthFixed -> optional, boolean flag whether table is at fixed width or resizable
 */
widthFixed: false,

/**
 * cancelSelection -> optional, boolean, defines whether tablesort should cancel
 * heading selecting or not.
 */
cancelSelection: true,

/**
 * sortList -> optional, array, This option let's you specify a default sorting rule.
 * default value is null
 */
sortList: [],

/**
 * headerList -> optional, array, List of Header? ) IDK what is that param.
 */
headerList: [],

/**
 * dateFormat -> optional, string, sets default format for dates found in your table
 * allows you to redefine the date format to use in sorting.
 */
dateFormat: "us",

/**
 * decimal -> optional, string, part of regex which characters are in decimal number
 */
decimal: '/\.|\,/g',

/**
 * selectorHeaders -> optional, string, holds a selector of heading th
 */
selectorHeaders: 'thead th',

/**
 * debug, optional, boolean, var name says by itself ;)
 */
debug: false

Now that you are ready to go with tablesorter, i can tell few more words about it
Not every field may be sorted, even if it looks like decimal or as date, in case you need to write custom parser, you are invited to read next article TableSorter Month/Year sorter (Custom Sorting), this one can be a good example of custom sorter coding.
Also Tablesorter allows to get extended with pagination plugin called Tablesorter Pager, The tutorial on Pager & options/settings is here: TableSorter Pager plugin tutorial and settings

Have fun playing with tablesorters settings.

Sincerely, Ruskevych Valentin