jQuery 製作分頁 Plugin

資料量一大，就不能避免做分頁，做分頁的方法很多種，可以一開始就把資料都讀入，然後再選擇是否出現，或是點了分頁之後，再去讀取資料都可以，server端的好解決，前端的就要花一些功夫，還好也滿多plugin可以用的，這個則是最近使用的plugin。

Plugin位置
jQuery Pagination Plugin

下載後可以參考他的sourecode，簡單的說要有一個地方放頁碼，一個地方放資訊內容，plugin幫你處理頁碼的分頁，然後經由callback再去處理要呈現的內容。

我用一個id="list"來放資訊內容，用id="pagination"來放頁碼。

先把頁面讀入

view plaincopy to clipboardprint

1. $("#list").load("group_member.html", null, initPagination);   

初始化

view plaincopy to clipboardprint

1. var initPagination = function() {   
2. $("#pagination").pagination(30 //資料數目, {   
3.     num_edge_entries: 2, //兩側頁碼數目   
4.     num_display_entries: 3, //中間顯示的頁碼數目   
5.     current_page:0, //目前頁, 預設是0   
6.     ellipse_text:"...", //省略的頁碼用什麼表現, 預設是"..."   
7.     callback: pageselectCallback, //回傳資料   
8.     items_per_page: 10, //每頁呈現筆數   
9.     prev_show_always: true, //是否顯示上一頁按鈕   
10.     next_show_always: true, //是否顯示下一頁按鈕   
11.     prev_text: "prev", //上一頁呈現文字   
12.     next_text: "next" //下一頁呈現文字   
13. });   
14. };   

最後處理callback要呈現的資料

view plaincopy to clipboardprint

1. function pageselectCallback(page_index, jq){   
2.     page_end=page_index+10;   
3.     $("#list li").hide();   
4.     for($i=page_index; $i<page_end; $i++){   
5.         $("#list li").eq($i).show();   
6.     }      
7.     return false;   
8. }  

Demo