AdSpeed.org | Giving it back: jQuery - Extend tablesorter plugin

jQuery - Extend tablesorter plugin

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>
	<title>Testing - sorttable.js</title>
	<script src="jquery-1.2.6.min.js"></script>
	<script src="jquery.tablesorter.min.js"></script>
	<script src="tablesorter.extend.js"></script>

<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>

</body>
</html>

Labels: javascript, jquery

0 comments

AdSpeed.org | Giving it back

jQuery - Extend tablesorter plugin

0 Comments:

PHP Classes

Recent Entries