序言
这一款js分页使用起来很爽,自己经常用,做项目时总是要翻以前的项目看,不方便,这里就把他写出来方便自己以后粘帖,也希望能分享给大家。
友情提示下:我有一片博客是用着个js实现的无刷新分页也很好用(这篇写的不是无刷新分页),链接地址为:无刷新分页 jquery.pagination.js
参数说明
参数名 | 描述 | 参数值 |
---|---|---|
maxentries | 总条目数 | 必选参数,整数 |
items_per_page | 每页显示的条目数 | 可选参数,默认是10 |
num_display_entries | 连续分页主体部分显示的分页条目数 | 可选参数,默认是10 |
current_page | 当前选中的页面 | 可选参数,默认是0,表示第1页 |
num_edge_entries | 两侧显示的首尾分页的条目数 | 可选参数,默认是0 |
link_to | 分页的链接 | 字符串,可选参数,默认是"#" |
prev_text | “前一页”分页按钮上显示的文字 | 字符串参数,可选,默认是"Prev" |
next_text | “下一页”分页按钮上显示的文字 | 字符串参数,可选,默认是"Next" |
ellipse_text | 省略的页数用什么文字表示 | 可选字符串参数,默认是"…" |
prev_show_always | 是否显示“前一页”分页按钮 | 布尔型,可选参数,默认为true,即显示“前一页”按钮 |
next_show_always | 是否显示“下一页”分页按钮 | 布尔型,可选参数,默认为true,即显示“下一页”按钮 |
callback | 回调函数 | 当点击链接的时候此函数被调用,此函数接受两个参数,新一页的id和pagination容器(一个DOM元素)。如果回调函数返回false,则pagination事件停止执行 |
插件代码
js代码
View Code
css代码(有好几款样式供你选择,不错的)
View Code
前端代码
<script src="../js/jquery.pagination.js" type="text/javascript"></script><link href="../css/pagination.css" rel="stylesheet" type="text/css" /><script type="text/javascript">$(function () {function pageselectCallback(page_id, jq) {//alert(page_id); 回调函数,进一步使用请参阅说明文档}$("#Pagination").pagination(<%=pcount%>, {callback: pageselectCallback,//PageCallback() 为翻页调用次函数。prev_text: " 上一页",next_text: "下一页 ",items_per_page: <%=pagesize %>, //每页的数据个数num_display_entries: 3, //两侧首尾分页条目数current_page: <%=page%>, //当前页码num_edge_entries: 2, //连续分页主体部分分页条目数link_to:"?page=__id__"});InterlacesColor(); //隔行换色(这个不是分页里面的js方法)});</script><asp:Repeater ID="Rpt_UserList" runat="server"><ItemTemplate> <tr><td><%# Eval("UserName")%></td> </tr><ItemTemplate></asp:Repeater><div id="Pagination" class="right flickr"></div>
后台代码:
protected int pcount = 0; //总条数protected int page = 0; //当前页protected int pagesize = 5; //设置每页显示的大小protected void Page_Load(object sender, EventArgs e){if (!int.TryParse(Request.Params["page"] as string, out this.page)){page = 0;}}#region 数据分页public void PageBind(string where,string order){ bll = new UserAccount();ds = new DataSet();pcount = bll.GetPageCount(where);ds = bll.GetDataByPage(page * pagesize,(page+1)*pagesize,order,where); if (ds != null && ds.Tables[0].Rows.Count > 0){Rpt_UserList.DataSource = ds;Rpt_UserList.DataBind();}}#endregion
样式效果展示:
<div id="Pagination" class="flickr"></div>
<div id="Pagination" class="meneame"></div>
<div id="Pagination" class="scott"></div>
<div id="Pagination" class="quotes"></div>
<div id="Pagination" class="black"></div>
好了在此就不疼了,自己用哪一款样式自己找吧,css里面有好多,不够用了,自己也可以修改为自己喜欢的样式。
再次友情链接:无刷新分页 jquery.pagination.js
补充: 多参数问题 (我的解决方案如下,谁有更好的可以分享下。)
$(function () {function pageselectCallback(page_id, jq) { TranUrl(page_id);}$("#Pagination").pagination(<%=pcount%>, {callback: pageselectCallback,//PageCallback() 为翻页调用次函数。prev_text: " 上一页",next_text: "下一页 ",items_per_page: <%=pagesize %>, //每页的数据个数num_display_entries: 3, //两侧首尾分页条目数current_page: <%=page%>, //当前页码num_edge_entries: 2, //连续分页主体部分分页条目数});//通过修改url来达到分页效果。function TranUrl(page_id){var url=location.href;var star;if(url.indexOf("aspx?")>0){if(url.indexOf("&page=")>0){ star=url.indexOf("&page=");url=url.substring(0,star);location.href=url+"&page="+page_id;}else{location.href=url+"&page="+page_id;}}else{location.href=url+"?page="+page_id;}}});