jQuery自定义分页插件

查看演示立即下载

插件描述：轻量级jQuery分页插件，配置简单，兼容性强，结合ajax实现

更新时间：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));
            });

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： 360度全景插件JS Cloudimage 360
下一个特效：弹出对话框插件MiniDialog(原创)