1. We have moved from vBulletin to XenForo and you are viewing the site in the middle of the move. Though the functional aspect of everything is working fine, we are still working on other changes including the new design on Xenforo.
    Dismiss Notice

Client Side Sorting With JavaScript

Discussion in 'JavaScript and AJAX' started by pradeep, Aug 8, 2012.

  1. pradeep

    pradeep Team Leader

    Joined:
    Apr 4, 2005
    Messages:
    1,646
    Likes Received:
    86
    Trophy Points:
    0
    Occupation:
    Programmer
    Location:
    Kolkata, India
    Home Page:
    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:
    <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:
    <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:
    // 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' } } }); 
    
     
    ManzZup likes this.

Share This Page