layui框架中用laypage与后端搭配使用做分页列表

layui框架中用laypage与后端搭配使用做分页列表

layui中文离线文档，包含html文档及layui源码

首先我们需要在layui.use中引入laypage:

layui.use(['laypage'],function(){
	laypage=layui.laypage;
})

然后在table.render写上下面这段代码:
prev,next是自定义的,obj.curr指的是当前页码,count是总条数，由后端返回，page是前端传的要查询的数据的页码;

done: function (e) {
      laypage.render({
          elem: 'page', //注意，这里的 page 是 ID，不用加 # 号
          count: e.count, //数据总数，从服务端得到
          curr: page,
          limit: size, // 每页条数
          prev: "<<",
          next: ">>",
          theme: "#0099ff",
          layout: ['count', 'prev', 'page', 'next'],
          skip: true,
          jump(obj, first) {
              if (!first) {
                  reloadTable(obj.curr, 10);//查询当页数据
              }
          }
      });
 },

可根据自身的需求进行调整

完整代码如下：

layui.use(['layer','laypage','form'],function(){
	 function reloadTable(page, size) {
	        $.ajax({
	            url: '后端接口+ '/' + page + '/' + size,
	            dataType: "json",
	            success: function (res) {
	                table.render({
	                    elem: '#currentTableId',
	                    data: res.data,
	                    cols: [[
	                    ]],
	                    done: function (e) {
	                        console.log("分页---", e);
	                        laypage.render({
	                            elem: 'page', //注意，这里的 page 是 ID，不用加 # 号
	                            count: e.count, //数据总数，从服务端得到
	                            curr: page,
	                            limit: size, // 每页条数
	                            prev: "<<",
	                            next: ">>",
	                            theme: "#0099ff",
	                            layout: ['count', 'prev', 'page', 'next'],
	                            skip: true,
	                            jump(obj, first) {
	                                if (!first) {
	                                    reloadTable(obj.curr, 10);//查询当页数据
	                                }
	                            }
	                        });
	                    },
	                    page: false,
	                });
	                form.render();
	            }
	        })
	    }
    })