Go4Expert

Go4Expert (http://www.go4expert.com/)
-   JavaScript and AJAX (http://www.go4expert.com/articles/javascript-tutorials/)
-   -   Client Side Sorting With JavaScript (http://www.go4expert.com/articles/client-sorting-javascript-t28848/)

pradeep 8Aug2012 19:18

Client Side Sorting With JavaScript
 
JavaScript, the most popular & most used client-side scripting language on the internet is really powerful in creating rich user experience by itself. One of the best example of JavaScript excellence is the jQuery library which has helped developers all over the world to build the business logic instead of looking into the nuances of event handlers, browser compatibility etc. Tablesorter is a jQuery based plugin which allows developers to enabled users sort data in tables by columns, by data type and it even allows you to define your own type.

In this article we'll look into the Tablesorter plugin so you might use it in your application.

The Basics



The basic requirement of Tablesorter plugin is that you have jQuery (1.2.1+), who doesn't these days, and in case you don't already use jQuery, try it, it's worth it. Download tablesorter from http://tablesorter.com/docs/index.html#Download

To your page HTML add the following lines of code in the HEAD section.

HTML Code:

<script type="text/javascript" src="/your-path-to/js/jquery-latest-min.js"></script>
<script type="text/javascript" src="/your-path-to/js/jquery.tablesorter.js"></script>

Add your HTML table, and call the tablesorter function like this.

HTML Code:

<html>
 <head>
  <title>Programming Languages</title>
  <script type="text/javascript" src="/js/jquery.js"></script>
  <script type="text/javascript" src="/js/jquery.tablesorter.js"></script>
  <script language="text/javascript">
  $(document).ready(function() {
    $('#ProgLangs').tablesorter();
  });
  </script>
 </head>

 <body>
  <table id="ProgLangs">
    <thead>
        <tr>
            <th>Sl. No.</th>
            <th>Language</th>
            <th>Popularity</th>
            <th>Votes</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>C</td>
            <td>90</th>
            <td>2100</th>
        </tr>
        <tr>
            <td>2</td>
            <td>Java</td>
            <td>60</th>
            <td>1800</th>
        </tr>
        <tr>
            <td>3</td>
            <td>Perl</td>
            <td>30</th>
            <td>900</th>
        </tr>
    </tbody>
  </table>
 </body>
</html>

That's it, your table will be ready for client-side sorting.

Configuring/Tweaking



You may change default behaviour of the tablesorter, disallow certain columns from being sorted on, etc. Please follow the code examples below:

Code: JavaScript

// Restrict 1st column from being sorted on
$('#ProgLangs').tablesorter( { headers: { 0: { sorter: false} } } );

// Setting an initial sorting order, say sort on the 3rd column in ascending order
$('#ProgLangs').tablesorter( { headers: { 0: { sorter: false} }, sortList: [ [2,0] ]  } );

// Add a pager to show pagination, you will need extra HTML for the pager
$('#ProgLangs').tablesorter( { headers: { 0: { sorter: false} },  sortList: [ [2,0] ]  } ).tablesorterPager({container: $("#pager")});

// Add your own sorter, say we would like to sort language name on string length
$.tablesorter.addParser({
    // set an unique id
    id: 'sortByLen',
    is: function(s) {
        return false;
    },
    format: function(s) {
        // format your data for sorting
        return s.length();
    },
    // set type, numeric or text
    type: 'numeric'
});
 
$("#ProgLangs").tablesorter({ headers: { 1: { sorter:'sortByLen' } } });



All times are GMT +5.5. The time now is 04:58.