扩展layui分页,函数作为js函数的参数传递

项目中使用了layui的分页插件,但是分页插件功能有限,在每个需要分页的页面都需要初始化分页插件,设置页码点击事件,将查询记录与分页条联系起来,过于繁琐,干脆写个函数把这些操作封装一下,以后分页只要调用这个函数就行了

/**
 * 初始化分页 仅适用服务端分页,每次点击页码请求数据接口
 * @param divId 分页条的divId,不带“#”号
 * @param url 服务器端获取数据的接口地址
 * @param {{key:value}} queryParams 条件查询参数
 * @param {function} callback 回调函数
 * @param pageNumber 当前页码
 * @param pageSize 每页记录数
 */
function initLayuiPage(divId,url,queryParams,callback,pageNumber,pageSize){
    if(pageNumber==undefined){
        pageNumber = 1;
    }
    if(pageSize==undefined){
        pageSize = 10;
    }
    queryParams.pageNumber = pageNumber;
    queryParams.pageSize = pageSize;
    $.post(url,queryParams,function (result) {
        //‘服务器端返回封装结果集,status为000表示请求成功’
        if(result.status == '000'){
            layui.use('laypage',function () {
                var laypage = layui.laypage;
                laypage.render({
                    elem: divId //注意,这里的 test1 是 ID,不用加 # 号
                    ,count: result.total //数据总数,从服务端得到
                    ,limit:pageSize //每页显示的条数 默认为10
                    ,theme: '#096dd9'
                    ,curr:pageNumber
                    ,layout: [ 'prev','page', 'next']
                    ,jump: function(obj,first){//当分页被切换时触发,函数返回两个参数:obj(当前分页的所有选项值)、first(是否首次,一般用于初始加载的判断)
                        if(!first){
                            initLayuiPage(divId,obj.curr,obj.limit,url,queryParams,callback)
                        }
                    }
                });
            });
            if(typeof callback=='function'){
                callback(result)
            }
        }
    })
}    

函数调用时会把服务器端的结果集对象result传给回调函数,回调函数处理这个结果集,在页面上显示记录详情。

猜你喜欢

转载自www.cnblogs.com/lvsunshine21/p/9553783.html