AdSpeed.org» Blog Archive » jQuery – Extend tablesorter plugin

Giving IT Back – Knowledge Sharing Repository from AdSpeed Ad Server

October 16th, 2008 by admin

This js code extends the tablesorter plugin in jQuery:

Parser for sorting values like “$1,300.50″
Parser for sorting values like “2 months ago”,”3 years ago” (actual timestamp hide in the comment)
Parser for sorting values like “SMALLER”,”SMALL” (actual text value hide in comment)
Widget to highlight a row when mouse hovers it
Widget to highlight a header when mouse hovers it
Widget to save/memorize sort order via AJAX

Let’s get right into the code:

/** define custom sorter and widgets for tablesorter plugin for jQuery * @since 10/4/2008 * @author Son Nguyen */ // add sorting by 1,300,000 (with commas) $.tablesorter.addParser({ id: “fwnumber”, is: function(s) { return false; }, format: function(s) { return $.tablesorter.formatFloat(s.replace(/(\,|\%)/g,””)); }, type: “numeric” }); // only look for value in the comment, eg: <img>, $.tablesorter.addParser({ id: “commenttxt”, is: function(s) { return /^/.test($.trim(s)); }, format: function(s) { return s.replace(/^.*/g,”$1″); }, type: “text” }); // only look for value in the comment, eg: <date> $.tablesorter.addParser({ id: “commentnum”, is: function(s) { return /^/.test($.trim(s)); }, format: function(s) { return s.replace(/^.*/g,”$1″); }, type: “numeric” }); // show the hover row different than other rows $.tablesorter.addWidget({ id: “rowHover”, format: function(table) { $(“tr:visible”,table.tBodies[0]).hover( function () { $(this).addClass(table.config.widgetRowHover.css); }, function () { $(this).removeClass(table.config.widgetRowHover.css); } ); } }); // apply CSS to the sortable header when mouse hovers it $.tablesorter.addWidget({ id: “headerHover”, format: function(table) { $(“thead th:visible”,table).hover( function () { if (!table.config.headerList[$(“thead th:visible”,table).index(this)].sortDisabled) $(this).addClass(table.config.widgetHeaderHover.css); }, function () { $(this).removeClass(table.config.widgetHeaderHover.css); } ); } }); // call a link via AJAX to save/memorize the sort order $.tablesorter.addWidget({ id: “memorizeSortOrder”, format: function(table) { if (!table.config.widgetMemorizeSortOrder.isBinded) { // only bind if not already binded table.config.widgetMemorizeSortOrder.isBinded = true; $(“thead th:visible”,table).click(function() { var i = $(“thead th:visible”,table).index(this); $.get(table.config.widgetMemorizeSortOrder.url+i+’|’+table.config.headerList[i].order); }); } // fi } });

Demo HTML file

<html> <head> <script src="jquery-1.2.6.min.js"></script> <script src="jquery.tablesorter.min.js"></script> <script src="tablesorter.extend.js"></script> <style> .rowhover {background:green} .headerhover {background:blue} .even2 {background:#CCC} .odd {background:#DDD} </style> </head> <body> <h1>This table is sortable, click on the headings to sort</h1> <table id="myGrid" cellpadding="0" cellspacing="0"> <thead> <tr> <th>Number</th> <th>String</th> <th>Currency</th> <th>Embedded</th> <th>Time</th> </tr> </thead> <tbody> <tr> <td>120</td> <td>ABC</td> <td>$123.50</td> <td>MEDIUM</td> <td>1 month</td> </tr> <tr> <td>0</td> <td>XYZ</td> <td>$99</td> <td>SMALL</td> <td>1 week</td> </tr> <tr> <td>1</td> <td>Member</td> <td>$932,329</td> <td>SMALLER</td> <td>2 month</td> </tr> <tr> <td>678</td> <td>John Doe</td> <td>$323.23</td> <td>SMALLEST</td> <td>1 year</td> </tr> <tr> <td>4,342</td> <td>O’Ryan</td> <td>$1,223.50</td> <td>LARGE</td> <td>2 day</td> </tr> </tbody> </table> <script type="text/javascript"> $("#myGrid").tablesorter({ //debug:true, headers:{0:{sorter:'fwnumber'}}, widgets:['zebra','headerHover','rowHover','memorizeSortOrder'], widgetZebra:{css:["even","odd"]}, widgetRowHover:{css:'rowhover'}, widgetHeaderHover:{css:'headerhover'}, widgetMemorizeSortOrder:{url:'http://example.com/ajax.php?update='}, cssHeader:'', cssAsc:'', cssDesc:'' }); </script> </body> </html>

3 Responses

Aaron writes:
January 22nd, 20094:04 pmat

This looks great but what i am really interested in is this part of the code only look for value in the comment.

I want to look for a specific HTML comment in the code and add some html to it like a button.

Example:

Look for “Exact HTML Comment”

Add or replace the comment with div some HTML div then comment.

Is this possible?

Thanks for the help and sorry for the weird question but your code is the only code that has any thing related to looking for comments and replacing them in the html.

Reply
Matt writes:
May 22nd, 20091:18 amat

thank you very much. it is very useful.

Reply
sublogger writes:
October 29th, 20092:13 pmat

Hi,

This is exactly I wanted for my program. But somehow parser is not able to identify the values inside the comment with this code. Do you have any working demo link for this example?

Thanks

Reply