GridView Custom Pagination Example detailed (with demo source download) _ Practical Skills

This example describes the GridView custom paging implementation method. Share to everyone for your reference, specific as follows:

CSS Styles

First paste the CSS style code over:

. GV {border:1px solid #D7D7D7;
  font-size:12px;
Text-align:center;
  }. Gvheader {color: #3F6293;
  Background-color: #F7F7F7;
  height:24px;
  line-height:24px;
  Text-align:center;
  Font-weight:normal;
Font-variant:normal;
  }. gvheader th {font-weight:normal;
Font-variant:normal;
  }. Gvrow, Gvalternatingrow,. gveditrow {line-height:20px;
  Text-align:center;
  padding:2px;
height:20px; }. Gvalternatingrow {background-color: #F5FBFF;}. Gveditrow {background-color: #FAF9DD; Gveditrow input {back
  Ground-color: #FFFFFF;
width:80px; 
  Gveditrow. Gvorderid input,. gveditrow. Gvorderid {width:30px;}. gveditrow. checkbox input,. gveditrow. CheckBox {
Width:auto;
  }. Gvcommandfield {text-align:center;
width:130px;
  }. Gvleftfield {text-align:left;
padding-left:10px;
  }. Gvbtafield {text-align:center;
width:130px; }. Gvcommandfield Input {Background-image:url (..
  /images/gvcommandfieldabg.jpg); background-repeat:no-Repeat
  line-height:23px;
  Border-top-style:none;
  Border-right-style:none;
  Border-bottom-style:none;
  Border-left-style:none;
  width:50px;
  height:23px;
  margin-right:3px;
  margin-left:3px;
text-indent:10px;
  }. gvpage {padding-left:15px;
  font-size:18px;
  Color: #333333;
Font-family:arial, Helvetica, Sans-serif;
  }. gvpage a {display:block;
  Text-decoration:none;
  padding-top:2px;
  padding-right:5px;
  padding-bottom:2px;
  padding-left:5px;
  border:1px solid #FFFFFF;
  Float:left;
  font-size:12px;
Font-weight:normal;
  }. gvpage A:hover {display:block;
  Text-decoration:none;
border:1px solid #CCCCCC;

 }

GridView Style

According to the CSS style style names listed above, add them to the different tags for the Web page gridview, for example:

<rowstyle backcolor= "#E7E7FF" forecolor= "#4A3C8C" cssclass= "Gvrow"/>  
 

Pager paging Template

Where the code for the change below the GridView is:

<PagerTemplate> <table width= "100%" style= "FONT-SIZE:12PX;" > <tr> <td style= "Text-align:right" > <asp:label id= "lblpageindex" runat= "Server" text= ' & lt;%# ((GridView) Container.Parent.Parent). PageIndex + 1%> ' ></asp:Label> page/Total <asp:label id= ' lblpagecount ' runat= ' server ' text= ' <%# (GridView ) Container.Parent.Parent). PageCount%> ' ></asp:Label> page    <asp:linkbutton id= ' linkbuttonfirstpage ' runat= ' server ' Commandargument= "the" "Commandname=" Page "visible=" <%# (GridView) container.namingcontainer). PageIndex!= 0%> "> Home </asp:LinkButton> <asp:linkbutton id=" linkbuttonpreviouspage "runat=" Server "Comm Andargument= "Prev" commandname= "Page" visible= "<%# (GridView) container.namingcontainer). PageIndex!= 0%> "> prev </asp:LinkButton> <asp:linkbutton id=" linkbuttonnextpage "runat=" Server "Command Argument= "Next" commandname= "Page" visible= "<%# (GridView) ContaiNer. NamingContainer). PageIndex!= ((GridView) container.namingcontainer). PageCount-1%> "> Next </asp:LinkButton> <asp:linkbutton id=" linkbuttonlastpage "runat=" Server "Commanda Rgument= "Last" commandname= "Page" visible= "<%# (GridView) container.namingcontainer). PageIndex!= ((GridView) container.namingcontainer). PageCount-1%> "> Last </asp:LinkButton> <asp:textbox id=" Txtnewpageindex "runat=" server "text= ' <%# ( GridView) Container.Parent.Parent). PageIndex + 1%> ' width= 20px ' autopostback= ' true ' ></asp:TextBox> <asp:linkbutton id= ' Btngo ' runat= ' s Erver "commandargument=" "Go" commandname= "Page" text= "Go" onclick= "Btngo_click" ></asp:LinkButton> </td

 > </tr> </table> </PagerTemplate>

Triggering events

The definition of method Btngo_click is as follows:

protected void Gridview1_pageindexchanging (object sender, Gridviewpageeventargs e)
{
  Gridview1.pageindex = e. NewPageIndex;
  Binddata ();
}
protected void Btngo_click (object sender, EventArgs e)
{
  if ((LinkButton) sender). Commandargument.tostring (). ToLower (). Equals ("Go"))
  {
    GridViewRow gridviewrow = gridview1.bottompagerrow;
    TextBox Numbox = (textbox) GridView1.BottomPagerRow.FindControl ("Txtnewpageindex");
    int inputnum = Convert.ToInt32 (numbox.text);
    Gridview1.pageindex = inputNum-1;
    Binddata ();
  }

Display of the effect picture and source download

Full instance code click here to download the site.

I hope this article will help you to ASP.net program design.