ChPaging-API

教程

第一步

将jquery和ChPaging库引入到页面中

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

第二步

创建一个ChPaging实例,并操作实例关联列表展示。必须创建一个分页容器节点。

        //html
        < ul id="list">//与分页关联的列表节点

        < /ul>
        < div id="pagingId">< /div>//分页容器节点

1、使用ajax请求即时数据

        //js
    var paging = new ChPaging($("pagingId"),{
        xhr : {//与jq的ajax方法属性值相似。不同点:不能设置success回调
            url : '服务端请求接口地址'
            data : {请求参数}
            ...
        },
        xhrSuccess : function(data){//ajax中的success回调
            return {data : data.lsit, count : data.count}
        },
        operationReady(msg){//操作翻页执行前准备钩子
            paging.set({//重置请求参数
                xhr : {
                    data : {
                        current : msg.current,
                        limit : msg.limit
                    }
                }
            });
        },
        operationCallback : function(msg,data){
            //msg 返回属性
            //data 当前分页数据,数组。
            for(var i = 0; i < data.length; i++){
                $("#list").append(... data[i] ...);
            }
        }
    })

2、静态分页。(数据缓存在前端,不需要每次点击分页请求数据,也就是常说的假分页)

        //js
    var data = ["文章1","文章2","文章3","文章4","文章5","文章6"]
    var paging = new x
        data : data,
        limit : 2,
        operationCallback : function(msg,data){
            //msg 返回属性
            //data 当前分页数据,数组。
            for(var i = 0; i < data.length; i++){
                $("#list").append(... data[i] ...);
            }
        }
    })

ChPaging 首页 API 教程 demo

教程

第一步

第二步