jQuery TableSorter Plugin

 

jQuery TableSorter plugin is quite useful, but sometime, our actual requirement will be a bit special, following are the custom code for some special requirement.  

1.Disable header using metadata

Add class attribute to those particular column header  like following 

<th class="{sorter: false}">column name</th>

 

2.Setting column parser using metadata

Add class attribute to those particular column header  like following

<th class="{sorter: 'text'}">column name</th>

<th class="{sorter: 'procent'}">column name(20%)</th>

 

3.Custom sorting for those special column

e.g 

Overall Grades
bad
good
medium

Following code can be used,

// add parser through the tablesorter addParser method $.tablesorter.addParser({ // set a unique id id: 'grades', is: function(s) { // return false so this parser is not auto detected return false; }, format: function(s) { // format your data for normalization return s.toLowerCase().replace(/good/,2).replace(/medium/,1).replace(/bad/,0); }, // set type, either numeric or text type: 'numeric' }); $(function() { $("table").tablesorter({ headers: { 6: { sorter:'grades' } } }); });

 

4. Custom Date Sorting

 

example 1,

Date
21/01/2010
02/03/2010
12/10/2010

Following custom code can be used,

 

 <mce:script type="text/javascript"><!-- $.tablesorter.addParser({ id: 'dayMonthYear', is: function(s) { return false; }, format: function(s) { return s.toLowerCase().substring(6,10) + s.substring(3,5)+ s.substring(0,2); }, type: 'numeric' }); $(function() { $("table").tablesorter({ headers: { 1: { sorter:'dayMonthYear' } } }); }); // --></mce:script>

 

example 2,

Date
Jan 6, 2012
May 6, 2010
Oct 16, 1909

Following custom code can be used,

 // TableSort parser for date format: Jan 6, 1978 $.tablesorter.addParser({ id: 'monthDayYear', is: function(s) { return false; }, format: function(s) { var date = s.match(/^(/w{3})[ ](/d{1,2}),[ ](/d{4})$/); var m = monthNames[date[1]]; var d = String(date[2]); if (d.length == 1) {d = "0" + d;} var y = date[3]; return '' + y + m + d; }, type: 'numeric' }); var monthNames = {}; monthNames["Jan"] = "01"; monthNames["Feb"] = "02"; monthNames["Mar"] = "03"; monthNames["Apr"] = "04"; monthNames["May"] = "05"; monthNames["Jun"] = "06"; monthNames["Jul"] = "07"; monthNames["Aug"] = "08"; monthNames["Sep"] = "09"; monthNames["Oct"] = "10"; monthNames["Nov"] = "11"; monthNames["Dec"] = "12";

 

For more base knowledge of jQuery TableSorter Plugin, please refer http://tablesorter.com/docs/