淺談jQuery Pagination Ajax 分頁插件的使用

插件介紹

此插件是jQuery的ajax分頁插件。分頁切換時無刷新也無延遲，因為是一次性加載的。如果你用到此插件作分頁的時候，涉及到的數據量大，建議不要使用此插件，因為加載慢會導致用戶體驗不好！

插件使用

此插件使用比較簡單。主要引入以下文件就可以用了 
1.jquery.js依賴庫 
2.pagination.css 這個主要是樣式，我們在元素使用的時候將分頁列表放在class類為pagination的標簽內即可

<div class='pagination'></div>

3.jquery.pagination.js 分頁的主要骨架

參數說明 

使用方法

$("#Pagination").pagination(pageCount, {
        num_edge_entries: 2,
        num_display_entries: 4
        callback: pageselectCallback,
        items_per_page:10,
        prev_text: "<上一頁",
        next_text: "下一頁>"
    });

上面代碼中的pageCount一般是從后台返回的總的數據條數，也就是你一共有多少條數據。num_dege_entries:2表示首尾兩側分頁顯示2個。num_display_entries:4表示的是連續分頁顯示的主體數目，item_per_page:每頁顯示的列表項為10個。callback:pageselectCallback為回調函數。prev_text和next_text為前一頁下一頁按鈕上的顯示文字，默認的話是Prev 和 Next。

主要代碼與效果展示 

1.效果圖

2.主要代碼

//首次查詢： 
    offline_mark = keeper_offline("1");
    if (offline_mark != false) {
        offlinePageMark();//分頁查詢
    }
    //--分頁
    function offlinePageMark(){
        $("#offlinePage").pagination(offline_mark,        {
            num_edge_entries: 1, //邊緣頁數     
            num_display_entries: 5,//主體頁數
            callback: offlinePageCallback,
            items_per_page: 2, //每頁顯示2項
            prev_text: "<上一頁",
            next_text: "下一頁>"
        });
    }

    function offlinePageCallback(page_index, jq) {
        var page_index = parseInt(page_index + 1);
        keeper_offline(page_index);
        return false;
    }
    function keeper_offline(pageStr){
        var offline_mark = false;
        var params={};
        params.helperId=helperId;
        params.homeStatus = "offline";
        params.page = pageStr;      
        $.ajax({
                type: 'post',
                dataType: 'json',
                async:true,
                url: house_keeperURL,
                data:{params:JSON.stringify(params)},
                success: function (result) {
                    if (result.retCode=="0000"){
                        offline_mark = result.pageCount;
                        //列表內容展示代碼集，太多了，就省略了，根據各自需求去展示自己的內容就可以了                                             
                    }else{                              
                    }
                }
            })
            return offline_mark;
    }

總結： 

jquery pagination 是一個很好用的分頁插件，展示的效果也是能適應大多需求的，樣式的話也可以自己去改她的css就可以了。上手極其容易。我剛始接觸分頁的時候，並沒有用這個插件。而是自己去寫的一些共通的方法，代碼也不多。后來，有了她，我就直接用她了。不過，我現在也不用她去分頁了，現在用的就是layui的分頁插件。如果還有不懂的童鞋，可以給我留言你的問題。