JQuery Table Sorter Plugin

TableSorter plugin is used to do single column sorting as well as multiple column sorting without refreshing a whole page .

Here is a small Example to show  how Tablesorter plugin works.

STEP 1:-
download jquery.js and jquery-tablesorter.js file

STEP 2:- Embedd that js file into your source code or in your webpage.

Between  <HEAD></HEAD> tag , copy these lines

<script type=”text/javascript” src=”/path/to/jquery.js”></script>
<script type=”text/javascript” src=”/path/to/jquery.tablesorter.js”></script>

NOTE:- provide jquery.js and jquery-tablesorter.js path in src attribute

STEP 3:- Between  <BODY></BODY> tag, copy these lines and paste


<h1><u>Multiple Column Sorting  Example</u></h1>

<table  cellpadding=”3″ cellspacing=”1″  width=”100%”  id=”myTable”>
<thead >
<tr><th  width=”60″ >Name</th>
<th width=”60″>Task</th>
<th  width=”60″>Cell No.</th>
<th  width=”60″>Start Date</th>
<th  width=”60″>End Date</th>
<th  width=”60″>Completed By</th>
</tr>
</thead>
<tbody>
<tr><td>
Anand
</td>
<td>
PHP
</td>
<td>
111-222-3333
</td>
<td>
11/16/2009
</td>
<td>
11/23/2009</td>
<td>
ak60991
</td>
</tr>
<tr>
<td>
Vishal
</td>
<td>
Coldfusion
</td>
<td>
111-222-3334
</td>
<td>
11/16/2009
</td>
<td>
11/23/2009</td>
<td>
vu60998
</td>

</tr>
<tr>
<td>
Anand
</td>
<td>
Coldfusion
</td>
<td>
111-222-3334
</td>
<td>
11/16/2009
</td>
<td>
11/23/2009</td>
<td>
ak60991
</td>

</tr>
<tr>
<td>
Himadri
</td>
<td>
Coldfusion
</td>
<td>
111-222-3334
</td>
<td>
11/16/2009
</td>
<td>
11/23/2009</td>
<td>
hr60001
</td>

</tr>

<tr>
<td>
Gaurav
</td>
<td>
Coldfusion
</td>
<td>
111-222-3336
</td>
<td>
11/16/2009
</td>
<td>
11/23/2009</td>
<td>
gt56001
</td>
</tr>
<tr>
<td>
Himadri
</td>
<td>
Oracle
</td>
<td>
111-222-3336
</td>
<td>
11/16/2009
</td>
<td>
11/23/2009</td>
<td>
gt56001
</td>
</tr>
<tr>
<td>
Vishal
</td>
<td>
Oracle
</td>
<td>
111-222-3336
</td>
<td>
11/16/2009
</td>
<td>
11/23/2009</td>
<td>
vu60998
</td>
</tr>

</tbody>
</table>
<p><span><font color=”#990000″ size=”+1″><b>NOTE:</b></font></span> hold  shift key and click on  multiple headers/columns to do multiple column sorting!</p>


STEP 4:-Between <HEAD></HEAD> tag , copy and paste these lines

<script type=”text/javascript”>
<!–jQuery.noConflict();–>
var $j = jQuery.noConflict();

$j (document).ready(function()     {
//$j (“#myTable”).tablesorter({widgets: [‘zebra’]});

$j (“#myTable”).tablesorter();
}
);
</script>


Description:

this particular script will apply tablesorter() function of JQuery to table which has id ‘myTable’


STEP 5:- Add CSS style sheet into your code .

Copy and paste these lines between <HEAD></HEAD> tag


<style type=”text/css”>
.sort{font-size:9px;}

table.tablesorter .header {
background-image: url(“/path/to/bg.png”);
background-repeat: no-repeat;
padding-left: 30px;
padding-top: 8px;
width:auto;
}

table.tablesorter th.no_sort {
background-image: url(“/path/to/header.PNG”);
}
table.tablesorter .headerSortUp {
background-image: url(“/path/to/asc.png”);
background-repeat: no-repeat;
}
table.tablesorter .headerSortDown {
background-image: url(“/path/to/desc.png”);
background-repeat: no-repeat;
}
table.tablesorter .even {
background-color: #9999CC;
}
table.tablesorter .odd {
background-color: #FFFFFF;
}
</style>


Save your code and run it . Congrats you have implemented sorting on your table .

Screenshot is added


FEW Tips: open JQuery-tablesorter.js file,

you will see  some default values , you can change these values based on your requirements.i have commented on some parameters in below code .

this.defaults = {
cssHeader: “header”,// css header class
cssAsc: “headerSortUp”, // css headerSortUp class
cssDesc: “headerSortDown”, // css headerSortDown class
sortInitialOrder: “asc”, // you can change it based on how you want initial sorting
sortMultiSortKey: “shiftKey”,// here you can use CTRL key also
sortForce: null,
sortAppend: null,
textExtraction: “simple”,
parsers: {},
widgets: [‘zebra’],
widgetZebra: {css: [“even”,”odd”]},// css even ,odd class
// below commented code will disable sorting on first and second column
//headers: {0: { sorter: false}, 1: {sorter: false}},
headers: {},
widthFixed: false,
cancelSelection: true,
sortList: [],
headerList: [],
dateFormat: “us”,
decimal: ‘.’,
debug: false
};


Advertisements

3 Responses

  1. Very nice information.

    I have some queries :-

    1) I have a table with multiple
    how can apply sorting on specific header row by jquery.
    below is my table..

    SUM
    Account
    Age
    Total
    Discount
    Difference

    Date

    First Name
    Last Name
    Age
    Total
    Discount
    Difference

    Date

  2. // add parser through the tablesorter addParser method
    $.tablesorter.addParser({
    // set a unique id
    id: ‘inline’,
    is: function(s)
    {
    // return false so this parser is not auto detected
    return false;
    },
    format: function(s)
    {
    // format your data for normalization
    return s.replace(new RegExp(//),””);
    },
    // set type, either numeric or text
    type: ‘text’
    });

    $(document).ready(function() {

    $ (“#myTable”).tablesorter({widgets: [‘zebra’] ,headers: {
    0: {
    sorter:’inline’
    } }
    });

    });

    ———————————————————-
    The Above piece of code parse all markup avaialable in .

    Example if column 0 had format like :

    aa
    cc
    bb

    so it will sort based on value , not on tag href.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: