分享一個jq分頁插件

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

示列：

功能介紹：

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>//与分页关联的列表节点
<p id="pagingId"></p>//分页容器节点

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] ...);
            }
        }
    })

以上是分享一個jq分頁插件的詳細內容。更多資訊請關注PHP中文網其他相關文章！