Introduction

jGrid is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. jGrid can successfully parse and sort many types of data including linked data in a cell. It has many useful features including:

  • Multi-column sorting
  • Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time.
  • Support for ROWSPAN and COLSPAN on TH elements
  • Support secondary “hidden” sorting (e.g., maintain alphabetical sort when sorting on other criteria)
  • Cross-browser: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+
  • Small code size

Getting started

To use the tablesorter plugin, include the jQuery library and the tablesorter plugin inside the <head> tag of your HTML document:

<script type="text/javascript" src="jgrid.min.js"></script>

jGrid works on standard HTML tables. You must include THEAD and TBODY tags:


<table id="jgrid" border="0" cellpadding="0" cellspacing="1">
 <thead>

 <tr>
 <th>First Name</th>
 <th>Last Name</th>
 <th>Age</th>
 <th>Total</th>
 <th>Discount</th>
 <th>Difference</th>
 <th>Date</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>Peter</td>
 <td>Parker</td>
 <td>28</td>
 <td>$9.99</td>
 <td>20.9%</td>
 <td>+12.1</td>
 <td>Jul 6, 2006 8:14 AM</td>
 </tr>
 <tr>
 <td>John</td>
 <td>Hood</td>
 <td>33</td>
 <td>$19.99</td>
 <td>25%</td>
 <td>+12</td>
 <td>Dec 10, 2002 5:14 AM</td>
 </tr>
 <tr>
 <td>Clark</td>
 <td>Kent</td>
 <td>18</td>
 <td>$15.89</td>
 <td>44%</td>
 <td>-26</td>
 <td>Jan 12, 2003 11:14 AM</td>
 </tr>
 <tr>
 <td>Bruce</td>
 <td>Almighty</td>
 <td>45</td>
 <td>$153.19</td>
 <td>44.7%</td>
 <td>+77</td>
 <td>Jan 18, 2001 9:12 AM</td>

 </tr>
 <tr>
 <td>Bruce</td>
 <td>Evans</td>
 <td>22</td>
 <td>$13.19</td>
 <td>11%</td>
 <td>-100.9</td>
 <td>Jan 18, 2007 9:12 AM</td>
 </tr>
 </tbody>
</table>

Start by telling jGrid to sort your table when the document is loaded:


var myTextExtraction = function(node){
 // extract data from markup and return it
 return node.childNodes[0].childNodes[0].innerHTML;
}
$(document).ready(function(){
 $(function() {
 $("#jgrid").jgrid({sortList:[[0,0],[2,1]], widgets: ['zebra']});
 });
});

DEMO | jGrid.min.js