Sort GridView Using Table Sorter At Client Side

Introduction:

First of all i would like to introduce you with the table sorter. It’s an add-on that uses jQuery plugin to sort the table at client. Since we are sorting table at client side so no server resources is being consumed and no post back occurs and no load on server side for sorting the table. you can download this plugin from the following website www.tablesorter.com .Christian Bach is the author of this plugin which did a fantastic job.

Description:

While developing custom applications several times we have to came across a situations where we would have to display record from database into tables. And along with displaying records we also have to add functionality like searching, sorting,paging those table records etc. All this functionality is possible using this table sorter plugin. We can also use this plugin to sort ASP.NET GridView control. So in this article i will simply describe that how we can use this java script to sort table at client side.

Steps: Following are the steps that you need to follow to use this functionality.

1. Download and unzip this tablesorter plugin from this website.

2. Add this java script into your ASP.NET project/application.

3. Add CSS to display desired themes which comes along with the bundle containing two themes: Green,Blue.

4. Put the reference of this  table sorter java script  and css along with jQuery in the header section which looks something like this.

<script src=”jQuery-1.8.2.min.js” type=”text/javascript”></script>
<script src=”jquery.tablesorter.min.js” type=”text/javascript”></script><link href=”CSSPath.css” rel=”stylesheet” type=”text/css” />

5. Add images in the project and modify the css for respective image path.

6. Now add cssClass=”tablesorter” in the GrivewView.

7. In the header section in between <Script > tag. write following line of code to enable jQuery to sort gridView when the document is ready.

<script>
$(document).ready(function () {
$(‘#gvEmp’).tablesorter();
});
</script>

8. Now run your application and see the effect in browser.Sort the table by all columns.

Demo:

Paging in gridView

Paging in gridView

 

Advertisements

2 thoughts on “Sort GridView Using Table Sorter At Client Side

  1. Pingback: Filter GridView Using tablesorter_filter plugin in ASP.NET | Ravi Satyadarshi

  2. Pingback: Gridview Paging With TableSorter Pager Plugin | Ravi Satyadarshi

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