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: [].
For the Future Release of Table Pagination Plugin
History
- 10th June, 2009: Initial post