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:
