Introduction: In the previous article i have illustrated how we can use table sorter plugin into ASP.NET GridView Control to sort records displayed in gridview at client side without consuming server resources..This article describes the implementation of Pager ad-on of the table sorter plugin with GridView in ASP.NET to display paged records at the client side. So without making any post back you would be able to display desired no of records in gridview. So this would be a great approach if your application is going to contains large chunk/amount of data that need to sort and display at client side.
Procedures: Following are very simple steps that you need to follow.
1. Download and unzip this tablesorter plugin from this website. Move to the folder ~TableSorterPluginaddonspager. It contains a java script named "jquery.tablesorter.pager" .
2. Add this java script into your ASP.NET project/application alone with jQuery and table sorter java script.
3. Add style sheet from the same folder into your style sheet file or create a new css.
4. Put the references of this table sorter, tableSorterPager java scripts 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>
<script src="../Scripts/jquery.tablesorter.pager.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. Now paste the following code before or after the gridview as per your need to display pager in the page.
<div id="pager" class="tablesorterPager">
<img src="../images/first.gif" class="first">
<img src="../images/prev.gif" class="next">
<input type="text" class="pagedisplay" />
<img src="../images/next.gif" class="prev">
<img src="../images/last.gif" class="last">
<label>Records to Display</label>
<select class="pagesize">
<option selected="selected" value="5">5</option>
<option value="20">10</option>
<option value="30">20</option>
<option value="40">30</option>
</select>
</div>
8.In the header section in between <Script > tag. write following line of code to enable jQuery to sort gridView when the document is ready.
$(document).ready(function () {
$('#gvEmp')
.tablesorter({ widthFixed: true, widgets: ['zebra'] })
.tablesorterPager({ container: $('#pager') });
});
9. Now run your application and see the effect in browser.Paged the gridview by desired no of records.
Demo:
