Sorting table rows with JQuery

March 5th, 2010 by Alex Leave a reply »

When you deal with huge tabular data, a problem of sorting comes out. Basically, server-side sorting may result a big increase of load, and why do we need it if we can do it client-side.

First, we start with including the script for sorting tables:

<script src='http://code.jquery.com/jquery-1.4.2.min.js'></script>
<script type='text/javascript' src='jqsortable.js'></script>

You can actually (and it’s better) put the jquery source file on your host, this will lower the page loading time.

Next, make sure you put a “jqsortable” class for a table and put table header columns, like this:

  <table class='jqsortable'>
    <tr><th class='integer'>Item #</th><th class='integer'>Quantity</th><th class='string'>Title</th></tr>
    <tr>... values ...</tr>
  </table>

Note, that these classes are available for sorting: integer, float, string

And that’s it, you can watch the demo here
And, you can download the script source here

Update from June, 26
JQSortable is now more optimized and runs quicker

This page can be found by searching for:

jquery sort table rowsjquery sort rowssort table rows jqueryjquery sorting table rowsjquery table sort rows



Comments are closed.