Gridview Paging With TableSorter Pager Plugin

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:

Paging in gridView

Paging in gridView

Advertisements

One thought on “Gridview Paging With TableSorter Pager Plugin

  1. Pingback: Filter GridView Using tablesorter_filter plugin in ASP.NET | 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