asp.net webform自定义分页控件自定义分页控件
主要为大家详细介绍了asp.net webform自定义分页控件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
做web开发一直用到分页控件,自己也动手实现了个,使用用户自定义控件。
翻页后数据加载使用委托,将具体实现放在在使用分页控件的页面进行注册。
有图有真相,给个直观的认识:
自定义分页控件前台代码:
<style type="text/css">
.pager-m-l {
margin-left: 10px;
}
.pager {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
color: #333;
background-color: #fff;
text-align: center;
border: 1px solid #eee;
border-radius: 5px;
height: 30px;
line-height: 30px;
margin: 10px auto;
width: 650px;
}
.font-blue {
color: #5bc0de;
}
.pager a {
color: #5bc0de;
text-decoration: none;
}
.pager a.gray {
color: #808080;
}
.pager-num {
width: 30px;
text-align: center;
}
.pager-form-control {
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
padding: 2px 0px;
margin: 0px 2px;
}
.pager-form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}
.btn {
display: inline-block;
padding: 2px;
font-weight: normal;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
</style>
<div class="pager">
<span>当前<asp:Label runat="server" ID="labCurrentPageIndex" CssClass="font-blue"></asp:Label>/<asp:Label runat="server" CssClass="font-blue" ID="labTotalNumberOfPages"></asp:Label>页</span>
<span class="pager-m-l">共<asp:Label runat="server" CssClass="font-blue" ID="labRecordCount"></asp:Label>条记录</span>
<span class="pager-m-l">
<asp:LinkButton runat="server" ID="labFirstPage" OnClick="labFirstPage_Click">首页</asp:LinkButton>
|
<asp:LinkButton runat="server" ID="labPreviousPage" OnClick="labPreviousPage_Click">上一页</asp:LinkButton>
|<asp:LinkButton runat="server" ID="labNextPage" OnClick="labNextPage_Click">下一页</asp:LinkButton>