项目中使用了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传给回调函数,回调函数处理这个结果集,在页面上显示记录详情。