Sort HTML Table Using TableSorter Plugin

In this Post We will see how to sort html table to do that we are using a jQuery plug-in called  tablesorter which turns standard HTML table with THEAD and TBODY tags into a sortable table without refreshing  page.

Download            Live Demo

Installing TableSorter Plugin

 Include the jQuery library and the tablesorter plugin inside the <head> tag of your HTML document:

    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="js/tablesort.js"></script>

CSS Theming

There are two style sheets which you can find in download one for blue theme  and another for green theme.

    For Blue Theme
         <link rel="stylesheet" type="text/css" href="blue/style.css">

    For Green Theme
        <link rel="stylesheet" type="text/css" href="green/style.css">

HTML Table

<table id="myTable" class="tablesorter">

    <th>Product Name</th>

    <td>IPhone 6</td>

    <td>Galaxy S5</td>

    <td>Note 4</td>

    <td>HTC Desire One</td>

    <td>Moto G</td>

    <td>Nokia XL</td>



When the Document is ready call the tablesorter() on your table

$(document).ready(function() {
    // call the tablesorter plugin

Now You Can Click on the headers of the table and you'll see that table is sortable .

Sort On Particular Column

For Instance If you want your table to be sorted in first column and third column when the document is ready , then call the tablesorter() on your table by passing the parameter .
  // Sort On First and Third Column
  $("#myTable").tablesorter( {sortList: [ [0,0] , [1,0] ] } );

No comments:

Post a Comment