jQuery Pagination分頁外掛詳解-js教程-PHP中文網

jQuery Pagination分頁外掛詳解

小云云

發布： 2018-01-01 10:29:05

原創

2141 人瀏覽過

此jQuery插件為Ajax分頁插件，一次加載，故分頁切換時無刷新與延遲，如果資料量較大不建議用此方法，因為載入會比較慢。以下透過本文跟大家分享jQuery Pagination分頁插件的使用方法及參數介紹，有興趣的朋友一起看看吧

插件簡介

此jQuery插件為Ajax分頁插件，一次性加載，故分頁切換時無刷新與延遲，如果數據量較大不建議用此方法，因為加載會比較慢。

原插件CSS不太合理，使用浮動，故無法方便實現左右方向的定位，且未清除浮動，在中文修改版中我對其進行了優化，使其支持text-align的定位。

使用方法

跟一般的jQuery外掛一樣，此外掛程式使用也很簡單便捷。方法是pagination，例如$("#page").pagination(100);

#參數

參數名稱
	##描述	參數值
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	回呼函數	預設無執行效果

舉例

例如下面的使用程式碼：

$("#Pagination").pagination(56, {
  num_edge_entries: 2,
  num_display_entries: 4,
  callback: pageselectCallback,
  items_per_page:1
});

登入後複製

這段程式碼表示的意思是：總共有56(maxentries)個列表項，首尾兩側分頁顯示2(num_edge_entries)個，連續分頁主體數目顯示4(num_display_entries)個，回呼函數為pageselectCallback(callback)，每頁顯示的清單項目為1(items_per_page)個。