Click here to Skip to main content
11,706,799 members (57,269 online)
Click here to Skip to main content

Client Side Gridview Pagination using JQuery

, 10 Jun 2009 CPOL 92.8K 9.2K 47
Rate this:
Please Sign up or sign in to vote.
Client Side Gridview Paging using Jquery
2.JPG

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.

1.JPG

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

sagnik mukherjee
Web Developer
India India
I am from India, currently i am working in Microsoft Platform for building web and mobile applications.

You may also be interested in...

Comments and Discussions

 
QuestionVery Helpful article Pin
SaziaSayyed15-Jul-15 23:59
memberSaziaSayyed15-Jul-15 23:59 
Questionquestion Pin
akhtar.shahbaz12-Jun-15 21:08
professionalakhtar.shahbaz12-Jun-15 21:08 
Questionhide table pagination Pin
Member 107800225-Feb-15 0:58
memberMember 107800225-Feb-15 0:58 
Questionmy 5 :) Pin
King Fisher12-Jan-15 2:05
professionalKing Fisher12-Jan-15 2:05 
QuestionPlease reply Pin
Mahendra H. yadav4-Jul-14 3:59
memberMahendra H. yadav4-Jul-14 3:59 
QuestionPagination work fine but the page number not shown in dropdownlist. It show in a textbox Pin
maharajothi20-May-14 19:53
professionalmaharajothi20-May-14 19:53 
QuestionMy vote is 5 Pin
aaronjave16-Apr-13 6:24
memberaaronjave16-Apr-13 6:24 
Questionpagination works if only the window is refreshed Pin
kasirajan -7-Apr-13 22:52
memberkasirajan -7-Apr-13 22:52 
QuestionContentPlace Holder Pin
Reima Cram24-Jan-13 20:04
memberReima Cram24-Jan-13 20:04 
QuestionThanks Pin
avinashinde202028-Nov-12 2:04
memberavinashinde202028-Nov-12 2:04 
QuestionThis doesnt work if we do a server side Data Bind Pin
msdnexpert7-Oct-11 4:19
membermsdnexpert7-Oct-11 4:19 
AnswerRe: This doesnt work if we do a server side Data Bind Pin
pkaminiv17-May-12 23:20
memberpkaminiv17-May-12 23:20 
QuestionPaging in number Pin
megha.khamar@gmail.com17-Aug-11 23:59
membermegha.khamar@gmail.com17-Aug-11 23:59 
GeneralPrerender method for DataGrid Pin
u4bharat10-Jun-11 1:51
memberu4bharat10-Jun-11 1:51 
GeneralAdd Pager to a Repeater Pin
nipunasilva23-May-11 20:52
membernipunasilva23-May-11 20:52 
GeneralMy vote of 5 Pin
nipunasilva23-May-11 20:50
membernipunasilva23-May-11 20:50 
QuestionMissing Images Pin
jagman823-Jan-11 4:43
memberjagman823-Jan-11 4:43 
I am currently working to implement the function but I am not seeing where you are obtaining the images. I went through the zip folder but found nothing. Am I missing something? Thanks for the awesome work!

Raymond
Generalgridview paging using javascript only not by JQUERY Pin
nilesh.d.mankar27-Dec-10 4:31
membernilesh.d.mankar27-Dec-10 4:31 
GeneralMy vote of 4 Pin
bhavasinchana2-Dec-10 3:47
memberbhavasinchana2-Dec-10 3:47 
Questionpaging above the grid Pin
Chella S18-Nov-10 19:57
memberChella S18-Nov-10 19:57 
AnswerRe: paging above the grid Pin
sagnik mukherjee21-Nov-10 22:37
membersagnik mukherjee21-Nov-10 22:37 
GeneralRe: paging above the grid Pin
Chella S22-Nov-10 20:39
memberChella S22-Nov-10 20:39 
GeneralRe: paging above the grid Pin
sagnik mukherjee23-Nov-10 6:33
membersagnik mukherjee23-Nov-10 6:33 
GeneralRe: paging above the grid Pin
Chella S24-Nov-10 23:49
memberChella S24-Nov-10 23:49 
Question2grid view and 2 table in one page Pin
majid_3ma2-Nov-10 20:17
membermajid_3ma2-Nov-10 20:17 
Questionpaging with dynamic html table Pin
Guru_yogi6-Nov-09 1:39
memberGuru_yogi6-Nov-09 1:39 
AnswerRe: paging with dynamic html table Pin
NeoAlchemy8-Nov-09 15:15
memberNeoAlchemy8-Nov-09 15:15 
GeneralRe: paging with dynamic html table Pin
Guru_yogi8-Nov-09 18:01
memberGuru_yogi8-Nov-09 18:01 
GeneralRe: paging with dynamic html table Pin
NeoAlchemy8-Nov-09 18:13
memberNeoAlchemy8-Nov-09 18:13 
AnswerRe: paging with dynamic html table Pin
Guru_yogi8-Nov-09 19:51
memberGuru_yogi8-Nov-09 19:51 
Generalhelpful for me Pin
nicholas_pei10-Jun-09 16:44
membernicholas_pei10-Jun-09 16:44 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150819.1 | Last Updated 10 Jun 2009
Article Copyright 2009 by sagnik mukherjee
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid