jq分頁插件，支持動態，靜態分頁的插件，簡單易用。

工作中經常要用到分頁功能。為了方便封裝了一個比較通用的分頁插件開源出來了，簡單易用。

官網：https://cwlch.github.io/ChPaging

下載地址：https://github.com/cwlch/ChPaging

詳細教程：https://cwlch.github.io/ChPaging/example/guida.html

示列：

功能介紹：

1、支持靜態(寫死的數據、假分頁)、動態分頁(Ajax動態請求數據); 
2、使用功能可安需求選擇:首尾頁、上下頁、顯示條數選擇器、總頁數展示、快速跳轉; 
3、他沒有自帶樣式，開發者可以完全自定義樣式; 
4、簡單(使用簡單、代碼簡單);

使用方法：

第一步

將jquery和ChPaging庫引入到頁面中

 <script src="jquery.js"></script >
 <script src="ChPaging.1.0.1.min.js"></script >

第二步

創建一個ChPaging實例,並操作實例關聯列表展示。 必須創建一個分頁容器節點。

//html
<ul id="list"></ul>//與分頁關聯的列表節點
<div id="pagingId"></div>//分頁容器節點

1、動態分頁，使用ajax請求即時數據

var paging = new ChPaging($("pagingId"),{
        xhr : {//與jq的ajax方法屬性值相似。不同點:不能設置success回調
            url : '服務端請求接口地址'
            data : {請求參數}
            ...
        },
        xhrSuccess : function(data){//ajax中的success回調
            return {data : data.lsit, count : data.count}
        }
        reloadPage : function(msg,data){
            //msg 返回屬性
            //data 當前分頁數據,數組。
            for(var i = 0; i < data.length; i++){
                $("#list").append(... data[i] ...);
            }
        }
    })

2、靜態分頁。(數據緩存在前端,不需要每次點擊分頁請求數據,也就是常說的假分頁)

var data = ["文章1","文章2","文章3","文章4","文章5","文章6"]
    var paging = new x
        data : data,
        limit : 2,
        reloadPage : function(msg,data){
            //msg 返回屬性
            //data 當前分頁數據,數組。
            for(var i = 0; i < data.length; i++){
                $("#list").append(... data[i] ...);
            }
        }
    })

 

希望對大家能有所幫助，歡迎留言討論。

謝謝！