Client Side Gridview Pagination using JQuery

Introduction

Here, I would like to show how to use Client Side Gridview Pagination using Jquery Table Pagination Plugin by using Ryan Zielke.

Using the Code

First create a folder called "images". Then paste all the image files into that folder.

Next, add the reference of Jquery and Plugin JavaScript file in the ASPX Page.

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery.tablePagination.0.1.js" type="text/javascript"></script>

Then add the CSS below. Here Width value of #testTable must be the same as the Width of your Gridview control.

#testTable { 
            width : 300px;
            margin-left: auto; 
            margin-right: auto; 
          }
          
           #tablePagination { 
            background-color:  Transparent; 
            font-size: 0.8em; 
            padding: 0px 5px; 
            height: 20px
          }
          
          #tablePagination_paginater { 
            margin-left: auto; 
            margin-right: auto;
          }
          
          #tablePagination img { 
            padding: 0px 2px; 
          }
          
          #tablePagination_perPage { 
            float: left; 
          }
          
          #tablePagination_paginater { 
            float: right; 
          }

Finally, add this script in your ASPX Page:

<script type ="text/javascript" >
	$(document).ready(
 	function() {
 	$('table').tablePagination({});
 	});
 	</script>

Now, add Gridview1_PreRender method in code behind, unless during paging you cannot see the Header of Gridview. Generally, Gridview does not use tbody, thead, or tfoot tags for the table that is generated when rendered in the browser. So, for Tbody and Thead, we need to add this function:

 protected void GridView1_PreRender(object sender, EventArgs e)
 {
     GridView1.UseAccessibleHeader = false;
     GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
 }

Configuration

You can change different parameters of jquery.tablePagination.0.1.js. Below are some of the settings from the authors Site:

firstArrow - Image - Pass in an image to replace default image.
Default: (new Image()).src="./images/first.gif"
prevArrow - Image - Pass in an image to replace default image.
Default: (new Image()).src="./images/prev.gif"
lastArrow - Image - Pass in an image to replace default image.
Default: (new Image()).src="./images/last.gif"
nextArrow - Image - Pass in an image to replace default image.
Default: (new Image()).src="./images/next.gif"
rowsPerPage - Number - used to determine the starting rows per page.
Default: 5
currPage - Number - This is to determine what the starting current page is. Default: 1
optionsForRows - Array - This is to set the values on the rows per page.
Default: [5,10,25,50,100]
ignoreRows - Array - This is to specify which 'tr' rows to ignore. It is recommended that you have those rows be invisible as they will mess with page counts.
Default: [].