2013年4月23日 星期二

jQuery 製作分頁 Plugin

pagination

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

Plugin位置
jQuery Pagination Plugin

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

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

先把頁面讀入
  1. $("#list").load("group_member.html"null, initPagination);   

初始化
  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要呈現的資料
  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

反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...