AspNetPager自定义分页控件样式

lzj0714

于 2015-07-14 10:06:47 发布

阅读量679

点赞数 1

本文链接：https://blog.csdn.net/lzj0714/article/details/46873771

版权

本文介绍了如何自定义AspNetPager分页控件的两种样式，包括带首页和尾页以及不带首页和尾页的样式，并展示了相应的CSS样式。同时，提供了后台数据绑定的方法，包括获取总页数、定制信息以及数据填充到GridView的操作。

摘要由CSDN通过智能技术生成

前台：

样式一（带首页和尾页）：
<wtl:pager pagesize="4" targetid="mylist" footer="5" isnullshow="true">
<div class="Page">
共<a class="Page_Max">{$RecordsTotal}</a>条 <a class="Page_PageCount">{$PageTotal}</a>页
<a class="Page_First" href="{$FirstPageUrl}">首页</a>
<a class="Page_Prev" href="{$PrevPageUrl}">上一页</a>
<a class="Page_Next" href="{$NextPageUrl}">下一页</a>
<a class="Page_End" href="{$LastPageUrl}">末页</a>
<input id='{$PageID}_input' value='{$CurrentPage}' class="Page_Text" type="text" /> 
<input id='{$PageID}_button' οnclick="redirectPage_{$PageID}('{$PageID}_input')" class="Page_Button" type="button" value="" />
</div>
</wtl:pager>

样式二（不带首页和尾页）
<wtl:pager pagesize="4" targetid="mylist" footer="5" isnullshow="true">
<div class="Page">
共有<a class="Page_PageCount">{$PageTotal}</a>页/当前位置：
<a class="Page_Prev" href="{$PrevPageUrl}">上一页</a>
<em class='num'>
<Numeric>
<a href='{$PageUrl}' class='{$PageNumClass}' id='pageNum{$PageNum}'>{$PageNum}</a>
</Numeric>
</em>
<a class="Page_Next" href="{$NextPageUrl}">下一页</a>
<input id='{$PageID}_input' value='{$CurrentPage}' class="Page_Text" type="text" /> 
<input id='{$PageID}_button' οnclick="redirectPage_{$PageID}('{$PageID}_input')" class="Page_Button" type="button" value="" />
</div>
</wtl:pager>
样式css：
/*page*/
.Page{text-align:right; padding:30px 0; clear:both; color:#4e4e4e;}
.Page a{ color:#4e4e4e; text-decoration:none;}
.Page .Page_Max{color:#c90d0d; margin:0 3px;}/*总条数*/
.Page .Page_PageCount{color:#c90d0d; margin:0 3px;}/*总页数*/
.Page .Page_First{}/*首页*/
.Page .Page_Prev{background:url(../images/page.gif) repeat-x; display:inline-block; width: 45px;height: 15px;line-height: 15px;text-align: center; border:1px solid #D7D7D7;}/*上一页*/
.Page .Page_Next{background:url(../images/page.gif) repeat-x; display:inline-block; width: 45px;height: 15px;line-height: 15px;text-align: center; border:1px solid #D7D7D7;}/*下一页*/
.Page .Page_End{}/*末页*/
.Page .Page_Text{ width:23px; height:15px; border-left:solid 1px #c5c5c5; border-top:solid 1px #c5c5c5; border-right:solid 1px #eaeaea; border-bottom:solid 1px #eaeaea; text-align:center;}/*页码文本框*/
.Page .Page_Button{ background:url(../images/GO.gif) no-repeat; width:30px; height:22px; font-size:12px; border:none; cursor:pointer;}/*按钮*/
.Page .num a{background:url(../images/page.gif) repeat-x; display:inline-block; width: 15px;height: 15px;line-height: 15px;text-align: center;border:1px solid #D7D7D7; margin-right:3px;}/*数字链接样式*/
.Page .a_cur{color:Red;}/*当前页选中*/

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Width="1024px"
EmptyDataText="没有数据" HorizontalAlign="Center" GridLines="None">
<Columns>
<asp:BoundField DataField="Name" HeaderText="项目名称" />
<asp:BoundField DataField="Saler" HeaderText="销售工程师" />
<asp:BoundField DataField="SignDateTime" HeaderText="销售时间" />
<asp:BoundField DataField="Industry" HeaderText="行业类别" />
<asp:BoundField DataField="ProjectManager" HeaderText="项目经理" />
<asp:TemplateField HeaderText="测试域名">
<ItemTemplate>
<div style="overflow: auto; width: 140px; height: 60px; text-align: center; background:#fff;">
<br />
<%#Eval("TestSiteUrl")%>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="正式域名">
<ItemTemplate>
<div style="overflow: auto; width: 140px; height: 60px; text-align: center; background:#fff;">
<br />
<%#Eval("Domain")%>
</div>
</ItemTemplate>
</asp:TemplateField>

</Columns>
</asp:GridView>

<asp:AspNetPager PageSize="10" CurrentPageIndex="1" ID="AspNetPager1" runat="server"
CssClass="paginator" CurrentPageButtonClass="cpb" OnPageChanged="AspNetPager1_PageChanged"
FirstPageText="首页" LastPageText="尾页" NextPageText="下一页" PrevPageText="上一页" ShowCustomInfoSection="Left"
ShowInputBox="Never" CustomInfoTextAlign="Left" LayoutType="Table">
</asp:AspNetPager>

后台：

//绑定数据

private void BindData()
{

using (SqlConnection connection = new SqlConnection(System.Web.Configuration.WebConfigurationManager.ConnectionStrings["sqlserver"].ToString()))
{
SqlCommand cmd = new SqlCommand(" select count(*) from Whir_ProjectInfo where 1=1 " + SWhere + " ", connection);
connection.Open();
AspNetPager1.RecordCount = int.Parse(cmd.ExecuteScalar().ToString());//总的页数
this.AspNetPager1.CustomInfoHTML = string.Format("当前第{0}/{1}页共{2}条记录每页{3}条", new object[] { this.AspNetPager1.CurrentPageIndex, this.AspNetPager1.PageCount, this.AspNetPager1.RecordCount, this.AspNetPager1.PageSize });
cmd = new SqlCommand(SQL.ToString(), connection);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
connection.Close();
GridView1.DataSource = ds;
GridView1.DataBind();
}

}

protected void AspNetPager1_PageChanged(object sender, EventArgs e)
{
BindData();
}

protected void AspNetPager1_PageChanging(object src, Wuqi.Webdiyer.PageChangingEventArgs e)
{
AspNetPager1.CurrentPageIndex = e.NewPageIndex;
}