jQuery自定义分页插件

 查看演示  website  立即下载

更新时间：2021-07-13 09:13:30

配置说明：

P.config = {
    elemId: '#page',
    pageIndex: '1',
    total: '0',
    pageNum: '7',
    pageSize: '10'
};
//elemId 分页容器，具体参照源码	
//pageIndex 当前页,一般不做配置，默认为1	
//total 总记录数，默认为0条，通过ajax获取到的总记录数更新值	
//pageNum 分页页码显示个数，默认7个	
//pageSize 列表显示记录数，默认10条2.使用方式	
P.initMathod({
    params: {
        elemId: '#Page',
        total: '123'
    },
    requestFunction: function() {
        // P.config.total = parseInt(Math.random() * 10 + 85
    );
    //此处模拟总记录变化	
    //TODO ajax异步请求过程,异步获取到的数据总条数赋值给 
    P.config.total $.ajax({
        url: 'demo/test', //后端服务请求地址	
        type: 'post',
        data: {}, //条件查询附带参数 
        dataType: 'json',
        async: false, //值为false，分页自动渲染；值为true,分页手动渲染
        success: function(res) {
            if ("0" == res.code) {
                //TODO 其他自己需要处理的业务逻辑，列表渲染自行处理	
                P.config.total = res.total; //res.total是后台返回的总记录数 
                //P.pageHtml();//重新渲染分页。使用时配合Ajax的属性async:false - 值为false，分页自动渲染；值为true,分页手动渲染	
                console.log(JSON.stringify(P.config)); //请忽略此行	
            } else {
                alert("暂无数据");
                //正式项目一般采用dialog弹框
            }
        },
        error: function() {
            alert("程序出现异常"); //正式项目一般采用dialog弹框
        }
    });
    //列表渲染自行处理
    console.log(JSON.stringify(P.config));
}
});

使用方法

1.配置说明：

P.config = {
    elemId: '#page',
    pageIndex: '1',
    total: '0',
    pageNum: '7',
    pageSize: '10'
}；
//elemId 分页容器，具体参照源码
//pageIndex 当前页,一般不做配置，默认为1
//total 总记录数，默认为0条，通过ajax获取到的总记录数更新值
//pageNum 分页页码显示个数，默认7个
//pageSize 列表显示记录数，默认10条

2.使用方式

P.initMathod({
            params: {
                elemId: '#Page',
                total: '123'
            },
            requestFunction: function() {
                // P.config.total = parseInt(Math.random() * 10 + 85);//此处模拟总记录变化
                //TODO ajax异步请求过程,异步获取到的数据总条数赋值给 P.config.total
                //列表渲染自行处理
                console.log(JSON.stringify(P.config));
            });

PREVIOUS:
NEXT:
弹出对话框插件MiniDialog(原创)
360度全景插件JS Cloudimage 360