?序言

---

這一款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;}}});

轉載于:https://www.cnblogs.com/h5monkey/p/5817211.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。