JqueryPagination 分頁插件使用說明

　　JqueryPagination是個簡單輕量級的分頁插件，使用起來很容易，只要初始化一個實例，並設置總數量、翻頁回調函數、其它參數就可以實現無刷新分頁功能了

　　

1 首先引入相關js文件：

<link href="Scripts/pagination.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script> // 個人發現插件對1.4版不支持
<script src="Scripts/jquery.pagination.js" type="text/javascript"></script>

 

2 編寫html代碼，在頁面添加一個div

 <div id="pagination">
 </div>

添加javascript 代碼，實例化分頁插件

 $(function () {
　　　　var pageCount=50;  //分頁總數量
      // $("#pagination").pagination(pageCount); //簡單初始化方法

 $("#pagination").pagination(pageCount, //分布總數量，必須參數
 {

　　　　　　　　　　callback: PageCallback,  //PageCallback() 為翻頁調用次函數。
                  prev_text: "« 上一頁",
                  next_text: "下一頁 »",
                  items_per_page:10,
                  num_edge_entries: 2,       //兩側首尾分頁條目數
                  num_display_entries: 10,    //連續分頁主體部分分頁條目數
                  current_page: 0,   //當前頁索引
　　　　　　　　　　link_to: "?id=__id__"  //分頁的js中會自動把"__id__"替換為當前的數。0　
　　　 });

 });

function PageCallback(page_index,jq)
{
     $.ajax({   

                type: "POST",  
                dataType: "text",  
                url: '后台處理地址',      //提交到一般處理程序請求數據   
                data: "pageIndex=" + (pageIndex) + "&pageSize=" + pageSize,          //提交兩個參數：pageIndex(頁面索引)，pageSize(顯示條數)           
                success: function(data) {
                           //后台服務返回數據，重新加載數據
                        }  
           }); 

}

4               插件pagination()方法參數

參數名	描述	參數值
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事件停止執行
load_first_page	初始化時是否執行回調函數	如果為true則當插件初始化時回調函數被執行。如果你通過ajax來顯示內容，那么在初始化分頁插件時應把它設置為false;默認值: true

 

 

5 插件其它方法

    // 自定義事件觸發分頁

    // 跳到第3頁 
    $("#pagination").trigger('setPage', [2]);
    // 下一頁
    $("#pagination").trigger('nextPage');
    // 上一頁
    $("#pagination").trigger('prevPage');

 

后台代碼就貼出來了，一般是返回json格式的數據到前面處理。

總結：JqueryPagination使用簡單，只需要設置參數和回調函數就可以用，通過回調函數處理 翻頁觸發的事件，比較靈活。