说一下实现分页的思路
这里的分页用到了一个组件 AspNetPage.dll,这个组件大家可以到网上去下载,我这里就不提供了
添加最近到工具箱中这样我们就可以像其他控件一样拖拽使用了
如图DataPage是在工具箱中的,至于怎么添加你们百度吧
拖拽到页面中如图
这个是我加完样式后显示的效果,怎么样是不是你们想要的了,如果不是你们还可以修改样式样式稍候奉上
先来看看要怎么使用
1
2
3
4
5
6
|
< webdiyer:AspNetPager ID = "AspNetPager1" runat = "server" AlwaysShow = "true"
PageSize = "20" CssClass = "paginator" CurrentPageButtonClass = "cpb"
LastPageText = "尾页" FirstPageText = "首页" PrevPageText = "上一页" NextPageText = "下一页"
UrlPaging = "false" NumericButtonTextFormatString = "{0}"
ShowCustomInfoSection = "Left" onpagechanged = "AspNetPager1_PageChanged" CustomInfoTextAlign = "Left" LayoutType = "Table" >
</ webdiyer:AspNetPager >
|
这个就是分页控件生成的代码
其中显示的首页,上一页,下一页,尾页,这些都可以在属性中定下要显示什么,也可以是图片,具体的要靠你们自己去研究了
PageSize属性设置每页显示的条数
UrlPageing这个属性可以设置分页的提交的方式,设置为true时使用url传递参数提交(经过自己测试这样页面会刷新,所以我没有使用url传递参数提交)
ShowCustomInfoSection设置显示的的位置 有左中右三个值,至于什么意思你懂的
onpagechanged这个事件为点击分页按钮时的事件,奉上代码
1
2
3
4
5
|
//分页事件
protected void AspNetPager1_PageChanged( object sender, EventArgs e)
{
BindView(ViewState[ "dataSource" ] as List<Tbl_Teacher>);
}
|
这里我调用了一个自定义绑定数据源的方法BindView
1
2
3
4
5
6
7
8
9
10
11
|
//绑定数据源
public void BindView(List<Tbl_Teacher> ls)
{
this .AspNetPager1.RecordCount = ls.Count();
this .GridView1.DataSource = ls.Skip((AspNetPager1.CurrentPageIndex - 1) * AspNetPager1.PageSize).Take(AspNetPager1.PageSize);
this .GridView1.DataBind();
this .AspNetPager1.CustomInfoHTML = string .Format( "当前第{0}/{1}页 共{2}条记录 每页{3}条" , new object []
{ this .AspNetPager1.CurrentPageIndex, this .AspNetPager1.PageCount, this .AspNetPager1.RecordCount, this .AspNetPager1.PageSize });
}
|
这里是绑定数据源,为了方便我使用的是linq来进行的分页,当然这里可以任由你来更改,可以使用存储过程,也可以传递直接用sql查询,主要就两个参数,
一个显示的条数,一个当前的页数,相信对于你们来说都不难事
到这里基本上已经贴出了所有代码,可能描述的不是很清楚,但也就这样了,本人水平有限。下面贴上两种样式:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<style type= "text/css" >
/*拍拍网风格*/
.paginator { font : 11px Arial , Helvetica , sans-serif ; padding : 10px 20px 10px 0 ; margin : 0px ;}
.paginator a { padding : 1px 6px ; border : solid 1px #ddd ; background : #fff ; text-decoration : none ; margin-right : 2px }
.paginator a:visited { padding : 1px 6px ; border : solid 1px #ddd ; background : #fff ; text-decoration : none ;}
.paginator .cpb { padding : 1px 6px ; font-weight : bold ; font-size : 13px ; border : none }
.paginator a:hover { color : #fff ; background : #ffa501 ; border-color : #ffa501 ; text-decoration : none ;}
/*淘宝风格*/
.paginator { font : 12px Arial , Helvetica , sans-serif ; padding : 10px 20px 10px 0 ; margin : 0px ;}
.paginator a { border : solid 1px #ccc ; color : #0063dc ; cursor : pointer ; text-decoration : none ;}
.paginator a:visited { padding : 1px 6px ; border : solid 1px #ddd ; background : #fff ; text-decoration : none ;}
.paginator .cpb { border : 1px solid #F50 ; font-weight : 700 ; color : #F50 ; background-color : #ffeee5 ;}
.paginator a:hover { border : solid 1px #F50 ; color : #f60 ; text-decoration : none ;}
.paginator a,.paginator a:visited,.paginator .cpb,.paginator a:hover
{ float : left ; height : 16px ; line-height : 16px ; min-width : 10px ; _width : 10px ; margin-right : 5px ; text-align : center ;
white-space : nowrap ; font-size : 12px ; font-family : Arial ,SimSun; padding : 0 3px ;}
</style>
|
总结:这个分页组件与数据分离,只提供了显示页数的功能,数据可以根据组件记录的页数和条数来进行绑定数据源,还是很方便的。
如果ASP.NET实现分页功能的描述还不够完整,还请你们补上,大家共同学习。