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

1 comments

1 Comments:

At 8:04 AM, Aaron said...: 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. :)

AdSpeed.org | Giving it back

jQuery - Extend tablesorter plugin

1 Comments:

PHP Classes

Recent Entries