HighOnCoding.com: Sorting GridView Using JQuery tableSorter Plug-in

Sorting GridView Using JQuery tableSorter Plug-in

AzamSharp
Published Date: 4/16/2010 10:21:08 AM
Views: 4477

Abstract:
JQuery is considered the most powerful JavaScript library available to the developers. The main power of the JQuery library lies in the fact that it allows other developers to easily extend the library by adding custom plug-ins. In this article we are going to demonstrate how to use the tableSorter JQuery plug-in to sort the rows of the GridView control.
Downloading TableSorter Plug-in:

The first task is to download the TableSorter plug-in which enables sorting of the HTML table element. The TableSorter plug-in can be downloaded using the following URL:

Download TableSorter Plug-in

Also make sure to download the latest version of the JQuery library. You can download the JQuery library using the following URL:

JQuery

Adding reference to the libraries in your page:

Before adding a reference to the TableSorter library to your page you must realize that the TableSorter library has a dependency on the JQuery library. This
means that before the TableSorter library is downloaded from the server the JQuery library must be downloaded first. This can be performed by using ScriptLoader feature of ASP.net 4.0. If you are interested using script loader then check out the following resources:

Using the ScriptLoader in ASP.net 4.0

Introduction to the ScriptLoader in ASP.NET 4.0

Take a look at the following snippet of code which demonstrates that first JQuery library is downloaded and after that the TableSorter plug-in is downloaded. This will ensure that the TableSorter plug-in only invokes the JQuery methods after the JQuery library has already been downloaded.

Displaying GridView Control on the Page:

Our next task is to display a GridView control on the page. We are using LINQ to SQL to populate our GridView control but feel free to use any data access
layer that you prefer. The implementation below shows the code which populates the GridView control.

Run the page and view the source code of the page you will notice that the GridView does not generate <thead>, <tbody> tags by default. In order to use the
TableSorter plug-in we must make sure that the GridView control renders those tags. This can be easily achieved by making a few adjustments in the page load event as shown below:

Now if you run the page and view the source of the page you will notice that a GridView renders the <thead> and <tbody> tags. Take a look at the following screenshot which shows the result:

In the next section we will demonstrate how to enable sorting using the TableSorter plug-in.

Initializing the TableSorter Plug-in:

The table sorter plug-in is very easy to initialize. Take a look at the following code which initializes the table sorter plug-in and enables sorting on the GridView control.

That is all the code you need to initialize the TableSorter. Run the page again and you will notice that by clicking the header of the GridView control you will be able to sort the columns. By clicking the column again it will sort in a different direction. In the next section we are going to enable paging in the GridView control and examine the effects of paging on the TableSorter plug-in.

TableSorter behavior with GridView paging enabled:

First let's enable paging in the GridView control by specifying the properties on the GridView element in HTML view. The code below shows how to enable paging in the GridView control and how to limit the page size to 5 rows.

Run the application after making the changes and you will be greeted by the following error message:

The error message indicates that there is a rendering problem for the GridView control. The GridView must be rendered in the form of Header, Body and then Footer elements. Unfortunately, by enabling paging on the GridView control the rendering is broken. In order to get rid of the error you can use the following snippet of code inside the page load event.

We commented out the TableFooter section for the GridView control. This will disable the <tfoot> element from rendering. Run the page again and you will notice that when the GridView is displayed with paging enabled. Click on the column header and you will notice that the last row which is reserved for paging is also being involved in the process of sorting. The screenshot below shows that how the paging row is ending up at the top of the GridView.

In the next section we are going to demonstrate how to fix the above scenario and not to involve the paging rows when sorting the GridView control.

Removing Paging Row from Sorting:

The first thing that we need is a way to distinguish normal rows from the paging row. There are many different ways to achieve this but the simplest one involves adding a class to the paging Row. The following code shows how to add a dummy class "foo" to the pager row.

Run the application and view the source of the page and you will notice that now the rows that contains the page numbers have a class "foo" associated with them.

Now that we have identified the paging row from all the other rows of the GridView control. We need some way to eliminate the paging during sorting. The TableSorter plug-in exposes two events which can be handled to control the sorting behavior. The sorting events are sortStart and sortEnd. The sortStart event is fired before the sorting actually takes place and the sortEnd is triggered after the sorting has taken place. Our main goal is to remove the paging row from the table at the start of sorting and then add the row back to the table at the end of sorting event. Take a look at the following code which shows how this is achieved.

The above code simply removes the row from the table which contains the class foo. And then add the row back to the table again in the end of sorting. Although this is not a perfect solution but it is better than involving the paging Row in sorting. The animation below shows our new GridView in action in which the paging rows are not handled.

Conclusion:

In this article we learned how to use the TableSorter JQuery plug-in to sort our GridView control. We also learned how to exclude the paging rows doing sorting in the GridView control.

[Download Sample]

Comments/Feedbacks