做網頁時，經常地我們要做自己的分頁控件底部頁碼部分的樣式，但是.net自己的樣式太過於單調，也不容易擴展，因些，我們經常要重寫pagerstyle，這樣也會很麻煩的，但是，我們如果利用.NET分頁功能所產生的JS腳本代碼，則可以很容易地實現我們想要的效果。下面，我們將利用.net的GRIDVIEW實現一個分頁顯示效果：
最終效果圖
實現步驟：
1.頁面添加一個GRIDVIEW控件，開啓分頁的功能。
2.可以看到下面有生成的頁碼效果。
3.下一步，將頁碼部分隱藏。
在頁面加入代碼：
<PagerStyle BackColor="White" ForeColor="Black" HorizontalAlign="Center" CssClass="hideMe" />
樣式hideMe代碼爲：
.hideMe {display:none;}
4.添加自己要定義的底部頁碼樣式，注意要在<asp:GridView 控件代碼的外部添加，不要在pagerstyle裏面添加，否則，原來自代的分頁頁碼就會丟掉。
<span class="fy_text" style="width:60;">
<asp:DropDownList ID="selCount" runat="server" OnSelectedIndexChanged="selCountIndexChange" AutoPostBack="True">
<asp:ListItem Value="5" Text="5條/頁"></asp:ListItem>
<asp:ListItem Value="10" Text="10條/頁"></asp:ListItem>
<asp:ListItem Value="15" Text="15條/頁" ></asp:ListItem>
<asp:ListItem Value="20" Text="20條/頁" Selected=True></asp:ListItem>
</asp:DropDownList>
</span>
<span class="fy_text" style="width:60;">
<select id="SelIndex" name="SelIndex" οnchange="__doPostBack('GridView1',document.form1.SelIndex.value)">
<%
for (int i = 1; i <= GridView1.PageCount; i++)
{
Response.Write("<option value=\"Page$" + i.ToString() + "\" " + (GridView1.PageIndex+1 == i ? "selected" : "") + ">第 " + i.ToString() + " 頁</option>");
}
%>
</select></span>
<span class="fy_text" style=" width:96; border:solid 1px #CCCCCC;">共<%=GridView1.Rows.Count%>條 /分<%=GridView1.PageCount%>頁</span>
<%if (GridView1.PageIndex == 0)
{ %>
<span class="fy_text" style="width:48;border:solid 1px #CCCCCC;"><a href="#" class="syy_on">上一頁</a></span>
<%}
else
{
Response.Write("<span class='fy_text' style='width:48;border:solid 1px #CCCCCC;'><a href=\"javascript:__doPostBack('GridView1','Page$"+ GridView1.PageIndex.ToString()+"')\">上一頁</a></span>");
}
%>
<%
for (int i = 1; i <= GridView1.PageCount; i++)
{
if (i != GridView1.PageIndex + 1)
Response.Write("<span class='fy_text' style='width:19; border:solid 1px #CCCCCC;font-family:Arial;'><a href=\"javascript:__doPostBack('GridView1','Page$" + i.ToString() + "')\"> " + i.ToString() + " </a></span>");
else
Response.Write("<span class='fy_text' style='width:19; border:solid 1px #CCCCCC;font-family:Arial; color:red;'>" + i.ToString() + "</span>");
}
%>
<%if (GridView1.PageIndex + 1 < GridView1.PageCount)
{ %>
<span class="fy_text" style="width:48; border:solid 1px #CCCCCC;"><a href="javascript:__doPostBack('GridView1','Page$<% =GridView1.PageCount-1>GridView1.PageIndex?(GridView1.PageIndex+2).ToString():(GridView1.PageIndex+1).ToString() %>')" >下一頁</a></span>
<%}
else { Response.Write("<span class='fy_text' style='width:48; border:solid 1px #CCCCCC; color:#cccccc'>下一頁</span>"); }%>
這樣，我們底部頁碼部分效果就做好了，利用控件分頁自動生成的__doPostBack()函數實現頁面跳轉，十分方便，我們所做的無非就是做一些頁碼呈現的控制和實現各個控件間的協作功能。十分簡單。
關鍵點：不要改變自帶的pagerstyle，將其隱藏，這樣就可以利用.net自動生成的doPostBack函數。
附上我的頁面代碼:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ManagerNews.aspx.cs" Inherits="Manager_ManagerNews" EnableEventValidation="true"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>新聞列表</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script>
function checkAll(obj)
{
var input=document.getElementsByTagName("input");
for(var i=0;i<input.length;i++)
{
if(input[i].type=="checkbox"&&input[i]!=obj)
{
if(input[i].checked==true)
{
input[i].checked=false;
}
else if(input[i].checked==false)
{
input[i].checked=true;
}
}
}
}
</script>
<style type="text/css">
.tr { line-height:21px; height:21px;}
.hideMe {display:none;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="news_list">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-bottom:15px;">
<tr>
<td class="zwln_title" width="110"><a href="NewsAdd.aspx" target="right">== 新增新聞 ==</a> </td>
<td width="520" class="zwln_title"> </td>
<td width="50" class="zwln_title"><a href="javascript:checkAll(this);">[全選]</a></td>
<td width="50" class="zwln_title">
<asp:LinkButton ID="lbtnDelete" runat="server" OnClick="lbtnDelete_Click">[刪除]</asp:LinkButton>
</td>
<td width="80" class="zwln_title">新聞分類:</td>
<td width="90" class="zwln_title">
<asp:DropDownList ID="dropNewsType" runat="server" AutoPostBack="True" OnSelectedIndexChanged="dropNewsType_SelectedIndexChanged">
</asp:DropDownList>
</td>
</tr>
</table>
<asp:GridView ID="GridView1" runat="server"
CellPadding="4" ForeColor="#333333" GridLines="None" Width="100%"
AutoGenerateColumns="False" EmptyDataText="暫時沒有新聞" AllowPaging="True" PageSize="20" OnPageIndexChanging="GridView1_PageIndexChanging" OnRowDataBound="GridView1_RowDataBound">
<PagerStyle BackColor="White" ForeColor="Black" HorizontalAlign="Center" CssClass="hideMe" />
<HeaderStyle CssClass="bt_title"/>
<RowStyle BackColor="#EFF3FB" CssClass="bt_title2"/>
<AlternatingRowStyle BackColor="White" />
<EmptyDataRowStyle HorizontalAlign="Center" ForeColor="#827339" />
<Columns>
<asp:TemplateField >
<ItemTemplate>
<input id="chSelect" type="checkbox" runat="server"/>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" CssClass="bt_title2"/>
</asp:TemplateField>
<asp:TemplateField HeaderText="新聞標題">
<ItemTemplate>
<%#ComDll.GetSubBString(Eval("EditTitle").ToString(), 48)%>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" CssClass='bt_title3'/>
</asp:TemplateField>
<asp:TemplateField HeaderText="權限">
<ItemTemplate>
<%#Eval("ImportSign").ToString()=="0"?"一般":"加密"%>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" CssClass='bt_title2'/>
</asp:TemplateField>
<asp:BoundField DataField="classname" HeaderText="分類" >
<ItemStyle HorizontalAlign="Center" CssClass="bt_title2"/>
</asp:BoundField>
<asp:BoundField DataField="SourceName" HeaderText="來源" >
<ItemStyle HorizontalAlign="Center" CssClass="bt_title2"/>
</asp:BoundField>
<asp:TemplateField HeaderText="信息日期">
<ItemTemplate>
<%#string.IsNullOrEmpty(Eval("DeclareDate").ToString())?"":
Convert.ToDateTime(Eval("DeclareDate")).ToString("yyyy-MM-dd") %>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" CssClass="bt_title2"/>
</asp:TemplateField>
<asp:TemplateField HeaderText="操作">
<ItemTemplate>
<a href="Modify.aspx?ID=<%#Eval("ID") %>">修改</a>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" CssClass="bt_title2"/>
</asp:TemplateField>
</Columns>
<PagerSettings PageButtonCount="1000" />
</asp:GridView>
<br />
<span class="fy_text" style="width:60;">
<asp:DropDownList ID="selCount" runat="server" OnSelectedIndexChanged="selCountIndexChange" AutoPostBack="True">
<asp:ListItem Value="5" Text="5條/頁"></asp:ListItem>
<asp:ListItem Value="10" Text="10條/頁"></asp:ListItem>
<asp:ListItem Value="15" Text="15條/頁" ></asp:ListItem>
<asp:ListItem Value="20" Text="20條/頁" Selected=True></asp:ListItem>
</asp:DropDownList>
</span>
<span class="fy_text" style="width:60;">
<select id="SelIndex" name="SelIndex" οnchange="__doPostBack('GridView1',document.form1.SelIndex.value)">
<%
for (int i = 1; i <= GridView1.PageCount; i++)
{
Response.Write("<option value=\"Page$" + i.ToString() + "\" " + (GridView1.PageIndex+1 == i ? "selected" : "") + ">第 " + i.ToString() + " 頁</option>");
}
%>
</select></span>
<span class="fy_text" style=" width:96; border:solid 1px #CCCCCC;">共<%=GridView1.Rows.Count%>條 /分<%=GridView1.PageCount%>頁</span>
<%if (GridView1.PageIndex == 0)
{ %>
<span class="fy_text" style="width:48;border:solid 1px #CCCCCC;"><a href="#" class="syy_on">上一頁</a></span>
<%}
else
{
Response.Write("<span class='fy_text' style='width:48;border:solid 1px #CCCCCC;'><a href=\"javascript:__doPostBack('GridView1','Page$"+ GridView1.PageIndex.ToString()+"')\">上一頁</a></span>");
}
%>
<%
for (int i = 1; i <= GridView1.PageCount; i++)
{
if (i != GridView1.PageIndex + 1)
Response.Write("<span class='fy_text' style='width:19; border:solid 1px #CCCCCC;font-family:Arial;'><a href=\"javascript:__doPostBack('GridView1','Page$" + i.ToString() + "')\"> " + i.ToString() + " </a></span>");
else
Response.Write("<span class='fy_text' style='width:19; border:solid 1px #CCCCCC;font-family:Arial; color:red;'>" + i.ToString() + "</span>");
}
%>
<%if (GridView1.PageIndex + 1 < GridView1.PageCount)
{ %>
<span class="fy_text" style="width:48; border:solid 1px #CCCCCC;"><a href="javascript:__doPostBack('GridView1','Page$<% =GridView1.PageCount-1>GridView1.PageIndex?(GridView1.PageIndex+2).ToString():(GridView1.PageIndex+1).ToString() %>')" >下一頁</a></span>
<%}
else { Response.Write("<span class='fy_text' style='width:48; border:solid 1px #CCCCCC; color:#cccccc'>下一頁</span>"); }%>
</div>
</form>
</body>
</html>