Jquery Table sorter Plug-in and asp.net gridview control

During the learning of Jquery and searching of plug-ins, i have come across many plug-ins and i like many of them and find that some of the plug-in are more interested then the other ones and i will to share some of the with you people, but for this post i have choose the Table sorter plug-in. In this post i will try to explain you how you can configure grid view control in order to work with the table sorter plug-in.

You can find detail and example of how you can use the table sorter in HTML tag from here, the official site for the table sorter plug-in. I would like to mention main points of the table sorter plug-in here and then tell you what are the problems using table sorter with gridview control, and how you can overcome these problems, so that table sorter will work with the grid view control as well.The important and key point about the table sorter plug-in is that it will works on standard HTML tables. You must include THEAD and TBODY tags. So in order to work with the table sorter plug-in you have to have the THEAD tag in your table.

Let us start with our example of how you can use the table sorter plug-in with the gridview control of the asp.net 2.0. For this example, i have added one gridview control which is bind to the data source and then i will tell you which are the properties you have to do , so that the table sorter will work with the grid view control. First of all and most important thing is that you have to get the JavaScript files for the jquery and also the table sorter plug-in. The jquery and table sorter plug-in files are included in this code sample, You can also download the jquery latest file from the jquery official site. And table sorter plug-in file from the table sorter site. First you have to include the jquery latest file using the script tag and after that you have to include the table sorter JavaScript file.

Here is the code which will bind the table sorter with the grid view control. I have used the simplest of the code to bind the table sorter with the grid view control, For detail and more functionality you can visit the table sorter web site.

$(document).ready(function()
{
$("#grdvResultGrid").tablesorter() ;
$("#grdvResultGrid>tbody>tr:odd").addClass("TableRow");
});

In the code above what i did is to bind the table sorter with the grid view control which in this case i have used the id of the grid view control "grdvResultGrid", i have used the grid view control id here, but if you are using master page then you can't use it like this, as in case of master page the master page also append it id with the control. You have to append that id with the grid view id to get the gridview control.

Here is the code sample which is used to bind the grid view to the data source and then then set the appropriate properties to generate the THEAD tag for the grid view control so that will work with the table sorter plug-in.

DataSet dsCustomer = new DataSet();
dsCustomer.ReadXml(Server.MapPath(@"Database\Customer.xml"));
grdvResultGrid.DataSource = dsCustomer.Tables[0];
grdvResultGrid.DataBind();

if(grdvResultGrid.HeaderRow != null)
grdvResultGrid.HeaderRow.TableSection=TableRowSection.TableHeader;  

For the above code, first i have declare and initialize the data set object which is named "dsCustomer" as i will store the customer data in this data set. And in next statement i have read the customer.xml which is store in the dataBase folder of the project, i have write the customer table in the xml file and then place that xml file in the database folder of the project. In the next statements i have assign the DataSource of the grid view control the 0(zero) index table of the dataset and then call the dataBind() of the gridview control. After the DataBind() of the grid view control next is the important statement which is used to sort the grid view control data. The HeaderRow property of the grid view control is used to generate the header in an accessible format and generate the THEAD tags. And this is your main statement if you remove this statement then the table sorter plug-in will not work.

You can download the source code from here

All and any comments / bugs / suggestions are welcomed!