序言
这一款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; } } });