?序言

---

這一款js分頁使用起來很爽，自己經(jīng)常用，做項(xiàng)目時總是要翻以前的項(xiàng)目看，不方便，這里就把他寫出來方便自己以后粘帖，也希望能分享給大家。

友情提示下：我有一片博客是用著個js實(shí)現(xiàn)的無刷新分頁也很好用（這篇寫的不是無刷新分頁），鏈接地址為：無刷新分頁 jquery.pagination.js

---

參數(shù)說明

---

參數(shù)名描述參數(shù)值

maxentries	總條目數(shù)	?????????????????????? ?? 必選參數(shù)，整數(shù)
items_per_page	每頁顯示的條目數(shù)	??????????????? ????? 可選參數(shù)，默認(rèn)是10
num_display_entries	連續(xù)分頁主體部分顯示的分頁條目數(shù)	????????????????????? 可選參數(shù)，默認(rèn)是10
current_page	當(dāng)前選中的頁面	???????????????????? 可選參數(shù)，默認(rèn)是0，表示第1頁
num_edge_entries	兩側(cè)顯示的首尾分頁的條目數(shù)	???????????????????? 可選參數(shù)，默認(rèn)是0
link_to	分頁的鏈接	???????????????? 字符串，可選參數(shù)，默認(rèn)是"#"
prev_text	“前一頁”分頁按鈕上顯示的文字	??????????????? 字符串參數(shù)，可選，默認(rèn)是"Prev"
next_text	“下一頁”分頁按鈕上顯示的文字	?????????????? 字符串參數(shù)，可選，默認(rèn)是"Next"
ellipse_text	省略的頁數(shù)用什么文字表示	????????????????? 可選字符串參數(shù)，默認(rèn)是"…"
prev_show_always	是否顯示“前一頁”分頁按鈕	????????? 布爾型，可選參數(shù)，默認(rèn)為true，即顯示“前一頁”按鈕
next_show_always	是否顯示“下一頁”分頁按鈕	??????????布爾型，可選參數(shù)，默認(rèn)為true，即顯示“下一頁”按鈕
callback	回調(diào)函數(shù)	???????????? 當(dāng)點(diǎn)擊鏈接的時候此函數(shù)被調(diào)用，此函數(shù)接受兩個參數(shù)，新一頁的id和pagination容器（一個DOM元素）。如果回調(diào)函數(shù)返回false，則pagination事件停止執(zhí)行

---

插件代碼

---

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); 回調(diào)函數(shù)，進(jìn)一步使用請參閱說明文檔}$("#Pagination").pagination(<%=pcount%>, {callback: pageselectCallback,//PageCallback() 為翻頁調(diào)用次函數(shù)。prev_text: " 上一頁",next_text: "下一頁 ",items_per_page: <%=pagesize %>, //每頁的數(shù)據(jù)個數(shù)num_display_entries: 3, //兩側(cè)首尾分頁條目數(shù)current_page: <%=page%>, //當(dāng)前頁碼num_edge_entries: 2, //連續(xù)分頁主體部分分頁條目數(shù)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; //總條數(shù)protected int page = 0; //當(dāng)前頁protected int pagesize = 5; //設(shè)置每頁顯示的大小protected void Page_Load(object sender, EventArgs e){if (!int.TryParse(Request.Params["page"] as string, out this.page)){page = 0;}}#region 數(shù)據(jù)分頁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

?

---

---

?

補(bǔ)充： 多參數(shù)問題 ??（我的解決方案如下，誰有更好的可以分享下。）

---

?

---

?

?

$(function () {function pageselectCallback(page_id, jq) { TranUrl(page_id);}$("#Pagination").pagination(<%=pcount%>, {callback: pageselectCallback,//PageCallback() 為翻頁調(diào)用次函數(shù)。prev_text: " 上一頁",next_text: "下一頁 ",items_per_page: <%=pagesize %>, //每頁的數(shù)據(jù)個數(shù)num_display_entries: 3, //兩側(cè)首尾分頁條目數(shù)current_page: <%=page%>, //當(dāng)前頁碼num_edge_entries: 2, //連續(xù)分頁主體部分分頁條目數(shù)});//通過修改url來達(dá)到分頁效果。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;}}});

轉(zhuǎn)載于:https://www.cnblogs.com/h5monkey/p/5817211.html

總結(jié)

以上是生活随笔為你收集整理的无刷新分页 jquery.pagination.js的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。