介绍
一般查看大量信息的时候，都会有一个分页，这样子保证了用户的体验。
layui里面的表格也有这样子的功能
它在向后台发送请求的时候，会传递两个参数到后台，一个是当前页面，一个是每页多少条数据
这样子后台会根据这两个参数，去像后台拿到应有的数据，这样子，在数据量过大的时候，不用等待，它也减轻了负担
让客户的体验变得更好

代码
//后台代码
//因为没有数据库，我就直接存了100个假数据
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
//		获取前端传递需要的页号跟每页显示数量
		String pageNum = req.getParameter("page");
		String limit = req.getParameter("limit");
		
//		获取当页数量的集合
		List<User> pageList = getPageList(Integer.parseInt(pageNum),Integer.parseInt(limit));
		
		resp.setContentType("text/json;charset=utf-8");
		
//		将数据封装成前端需要的格式
		JSONObject data = new JSONObject();
		data.put("code", 0);
		data.put("msg", "no data."); // 无数据显示的内容
		data.put("count", userList.size());
		JSONArray array= JSONArray.parseArray(JSON.toJSONString(pageList));
		data.put("data", array);
		
		resp.getWriter().write(data.toString());
	}
//sql分页语句就是    select * from 表名   where (可能需要填的条件)   limit ?,?  后面两个问号就是
//开始和结束

结语
其实我们也可能根据我们的需求去封装一个工具分页类
这样子可以减少很多重复操作
比如: PageList<E> 
里面有全部内容的长度

大部分代码转自layUI社区   《嘉文》   道友的自定义分页插件
随后我增加了CheckBox选中行功能，并完善了一些《嘉文》道友没有明确指出的部分用法。


layui.define(['form','jquery', 'laypage'], function (exports) {
    var $ = layui.jquery, laypage = layui.laypage,form = layui.form();
    $.fn.jfTable = function (_opt, args) {
        if (typeof _opt == "string") {//判断是方法还是对象
            return JfTable.methods[_opt](this, args);
        }
        _opt = _opt || {};
        return this.each(function () {
            var grid = $.data(this, "jfTable");
            if (grid) {
                _opt = $.extend(grid.options, _opt);
                grid.options = _opt;
            } else {
                grid=new JfTable(this,_opt);
                $(this).data('jfTable',grid);
            }
        });
    }


    var JfTable=function (element,option) {
        this.$element=$(element);
        if(option.select){
            option.columns.unshift({
                type:'check',
                width: 50
            });
        }
        this.option= $.extend({},JfTable.default1, option);
        this.init();
        if(option.page){
            this.$page=$("<div class='page-bar'></div>").insertAfter(this.$element);
            this.initPage();
        }
    }

    JfTable.prototype.init=function () {
        $("<table class='layui-table'></table>").appendTo(this.$element.html(""));
        if(this.option.url){
            this.ajaxData();
        }
        this.initBody();
        this.initToolbar();
    };

    JfTable.prototype.initEvent=function () {
        var t=this,_opt=t.option;
        if(_opt.select){
            form.render("checkbox");
            form.on('checkbox(allChoose)', function(data){
                var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
                child.each(function(index, item){
                    item.checked = data.elem.checked;
                });
                form.render('checkbox');
            });
        }
    }
    //初始化选中行事件
    JfTable.prototype.initCheckbox=function(){
    	var t=this,_opt=t.option;
    	//获取tr的点击事件
    	 $("tbody tr").click(function() {
    		 	var checkbox = $(this).find(":checkbox").attr("checked");
    		 	//由于重复使用渲染，导致重复点击行后会加载不出来样式，所以此处使用removeClass和addClass来操作
    			if(checkbox){     
    			  	$(this).find(":checkbox").attr("checked",false)
    			  	$(this).find(":checkbox").next().removeClass("layui-form-checked");
    			}else{     
    			 	 $(this).find(":checkbox").attr("checked",true)
    			 	 $(this).find(":checkbox").next().addClass("layui-form-checked");
    			}     
    		});
    	   
    }


    //生成工具栏
    JfTable.prototype.initToolbar=function () {
        var t=this,$e=t.$element,_opt=t.option,toolbar=_opt.toolbar,tool= $("<div class='layui-btn-group'></div>").prependTo($e);
        $.each(toolbar,function (index,item) {
            var btn=$("<button class='layui-btn "+_opt.toolbarClass+"'></button>").appendTo(tool);
            if(item.icon){
                $("<i class='layui-icon'>"+item.icon+"</i>").appendTo(btn);
            }else{
                btn.append(item.text);
            }
            btn[0].οnclick=eval(item.handle||function (){});//绑定匿名事件
        });
    }

    JfTable.prototype.initPage=function () {
       var t=this,opt=t.option, page=t.$page;
        laypage({
            cont: page,
            curr: opt.curr,
            pages:opt.pages,
            groups: 5,
            jump: function (obj,s) {
                t.option.queryParam=$.extend(opt.queryParam,{pageNumber:obj.curr});
                if(!s){
                    t.init();
                }
            }
        });
    }

    JfTable.prototype.initBody=function () {
        var t=this,$e=t.$element,opt=t.option,col=opt.columns,dt=opt.data,
            $table=$e.find("table").html(""),
            $cg=$("<colgroup></colgroup>").appendTo($table),
            $th=$("<thead></thead>").appendTo($table),
            $thr=$("<tr></tr>").appendTo($th),
            $tb=$("<tbody></tbody>").appendTo($table);
        $tb.html("");
        if(opt.select){
            $table.wrapAll("<div class='layui-form'></div>");
        }
        //遍历创建表头
        for(var i=0,l=col.length;i<l;i++){
            var c=col[i];
            i==(l-1)?$("<col>").appendTo($cg):$("<col width='"+c.width+"'>").appendTo($cg);
            c.type=='check'?$("<th><input type='checkbox' lay-skin='primary' lay-filter='allChoose'></th>").appendTo($thr):$("<th>"+c.text+"</th>").appendTo($thr);
        }

        //生成tbody  表格体
        for(var i=0,l=dt.length;i<l;i++){
            var d=dt[i],$tr=$("<tr></tr>").appendTo($tb);
            //取出对应列值
            for(var j=0,cl=col.length;j<cl;j++){
                var c=col[j],v=d[c.name],f=c.formatter;
                if(c.type=='check'){
                    $("<td><input type='checkbox' value='"+i+"' lay-skin='primary'></td>").appendTo($tr);
                    continue;
                }
                if(typeof f == "function"){
                    v=f(v,d,i);
                }
                $("<td>"+v+"</td>").appendTo($tr);
            }
        }
        opt.onLoadSuccess(dt);
        if(opt.select){
            t.initEvent();
            t.initCheckbox();
        }
    }

    JfTable.prototype.ajaxData=function () {
        var opt=this.option,param=$.extend({},opt.queryParam,{pageSize:opt.pageSize}),
            result=$.ajax({
                url: opt.url,
                method:opt.method,
                data:opt.onBeforeLoad(param),
                async:false
            }).responseJSON;
        var json=JSON.parse(result.data);  
        opt.dataFilter(result);
        if(opt.page){
            opt.pages=json.totalPage;
            opt.curr=json.pageNumber;
        }
        opt.data= json.list;
    }

    JfTable.methods={
        option: function (jq) {
        	//取出该table的option属性
        	return $.data(jq[0], "jfTable").option;
        },
        insertRow: function (jq, row) {
        	//插入一行
            var s=$.data(jq[0],"jfTable"),opt=s.option;
            opt.data.unshift(row);
            s.initBody();
        },
        getRow: function (jq, args) {
        	//获取制定行的数据  返回row行数据
            var s=$(jq[0]).jfTable('option');
            return s.data[args];
        },
        reload: function (jq, param) {
        	//重新根据param加载，param可以自定义，其中包含了初始化的参数
        	//参数格式
        	//{
        		//index:1,//索引
        	    //row:{  //数据
        	    //}
        	//}
            var t=$.data(jq[0],"jfTable"),opt=t.option;
            opt.queryParam=$.extend({},opt.queryParam,param);
            t.init();
            if(opt.page){
                t.initPage();
            }
        },
        updateRow:function (jq,param) {
        	//更新指定行的数据
            var s=$.data(jq[0],"jfTable"),opt=s.option;
            opt.data[param.index]=param.row;
            s.initBody();
        },
        getSelected:function (jq) {
        	//获取选中行，返回数组['0','1']
           var s = $(jq[0]).find("table.layui-table tbody .layui-form-checked"),r=[];
           for(var i=0,l=s.length;i<l;i++){
               var index=$(s[i]).prev().val();
               r[i]=this.getRow(jq,index);
           }
           return r || undefined;
        }

    };
    JfTable.default1={
        columns: [],
        url: null,
        data:[],
        method:"get",
        select:false,
        toolbar:[],
        pageSize:20,
        queryParam: {},
        onBeforeLoad: function (param) {
        	//加载前事件，参数为table获取url数据发送的参数
            return param;
        },
        onLoadSuccess: function (data) {
        	//加载成功后触发，参数是数据体
            return data;
        },
        dataFilter:function (res) {
        	//数据过滤事件，参数是url的响应体
            return res;
        }
    };

    exports('jfTable', {});
});





以上为jfTable.js  使用layUI 的朋友们放到modules文件夹下，或者是另一目录




然后在layUI.js 中 的modules中添加对应的引用


加载完后，我们随机就可以在页面中调用了


记得引用哦
使用方法如下：


layui.use(['element','laypage', 'layer','jquery','laytpl','form','layedit', 'laydate','jfTable'], function(){
  var laypage = layui.laypage
  ,layer = layui.layer
  ,$ = layui.jquery
  ,laytpl = layui.laytpl
  ,form = layui.form()
  ,layedit = layui.layedit
  ,laydate = layui.laydate;
  var config = {
	        url:"${ctx}/member/getList",//获取数据的url
	        queryParam: {},//查询参数
	        page:true,//是否分页
	        pageSize:10,//每页数量
	        select:true,//是否生成checkbox
	        columns: [ 
	                   {text:'昵称',name: 'nickName',width: 100,formatter:function(value,row,index){return value;}},
	                   {text:'电话',name: 'phone',width: 100,formatter:function(value,row,index){return value;}},
	                   {text:'用户类型',name: 'userType',width: 100,formatter:function(value,row,index){return value;}}
	                   ],
	        method:"post",//请求方式
	        onBeforeLoad: function (param) {
	            return param;
	        },
	        onLoadSuccess: function (data) {
	            return data;
	        },
	        dataFilter:function (data) {
	            return data;
	        }
	            
	    }
  		$("#table").jfTable(config);//config
});
  


页面中只需要定义一个ID为table的div即可使用了
<div id="table"></div>
那么我们需要在后台指定的格式又是什么呢。当时我就在这里懵逼了，因为《嘉文》道友并没有说明后台需要返回的什么格式。然后我就去断点找啊找
{"totalPage":3,"pageNumber":1,"list":[{"nickName":"小明","phone":"18101051555","userType":"管理员"}]}



totalPage 总页数

pageNumber当前页

list为数据


嘉文道友的说明文档我也发上来大家不懂得可以看下
# jfTable 使用说明



---



>jfTable基于layui实现的一个table插件，能够自动生成一个数据表格

>内置分页以及按钮功能，实现方法大致参考easyui的datagrid

>功能还在完善，喜欢的朋友多多提提意见，工作之余我尽量多完善,因为是基于layui的，所以必须要使用layui的方式去使用它



>这个小东西也是我之前没事的时候对着easyui的datagrid的源码研究了一通，然后又想学着layui的使用方法做了个练手的东西。

>很多地方不合理我也明白，希望大家多提点提点，js我也只会些粗浅的东西



###效果演示

![效果演示](http://git.oschina.net/uploads/images/2017/0401/142909_f2175c5f_417829.png "效果演示")





###1 配置说明

使用方法



    <div id="table"></div>

    var config={} $("#table").jfTable(config);//config参考下面进行配置



 

        

      var config = {

        url:"",//获取数据的url

        data:[],//本地数据  不支持本地数据的分页

        queryParam: {},//查询参数

        page:true,//是否分页

        pageSize:10,//每页数量

        select:true,//是否生成checkbox

       

        columns: [ {//列数组

                text:'用户名',//显示的表头

                name: 'username',//显示的数据key

                width: 100,//宽度

                formatter:function(value,row,index){//value 当前值  row 当前行数据  index 当前行索引

                }

            }],

        method:"post",//请求方式

        toolbarClass:"layui-btn-small",//按钮的样式

        toolbar:[{//按钮数组

                text:"新增",//icon缺省时显示

                icon:"&#xe654;",//按钮图标（如果不为空则显示按钮不显示text）

                handle:function () {//绑定函数

    

                }

            }]，

        //事件   一定要return 

        onBeforeLoad: function (param) {

            return param;

        },

        onLoadSuccess: function (data) {

            return data;

        },

        dataFilter:function (data) {

            return data;

        }

            

    }







### 2 目前实现的方法

####2.1 option  //无参数

取出该table的option属性



####2.2 reload （param）

重新根据param加载，param可以自定义，其中包含了初始化的参数



####2.3 insertRow(row)

插入一行



####2.4 getRow(index)

获取制定行的数据  返回row行数据





####2.5 update(data{index:1,row{}})

更新指定行的数据

参数格式

```

{

    index:1,//索引

    row:{  //数据

        

    }

}

```



####2.6 getSelected  //无参数

获取选中行，返回数组['0','1']





### 3 事件（自定义事件一定要写返回）



####3.1 onBeforeLoad(param)

加载前事件，参数为table获取url数据发送的参数



####3.2 onLoadSuccess(data)

加载成功后触发，参数是数据体



####3.3 dataFilter(res)

数据过滤事件，参数是url的响应体

本该有分页的地方，没有分页，F12看了一下，div是存在的，莫名加了一个“layui-hide”属性，


F12:




js：
 // 渲染表格
    var tableResult = table.render({
        elem: '#' + Device.tableId,
        url: Feng.ctxPath + '/device/findAll',
        height: "full-98",
        cellMinWidth: 100,
        cols: Device.initColumn(),
        page: true
    });

看了一下后台，忘记把Page参数传到查询sql中，附一下完整的后台代码：
controller:
/**
* 查询设备列表
* @return
* @data 2020-11-18 10:09
*/
@RequestMapping("/findAll")
@Permission(Const.ADMIN_NAME)
@ResponseBody
public LayuiPageInfo findAllDevices(@RequestParam(required = false) String name,
                                   @RequestParam(required = false) Long deptId){

   log.info("#######################  查询设备列表 #######################");
   //获取分页参数
   Page page = LayuiPageFactory.defaultPage();
   page.setRecords(deviceService.findAllDevice(page,name,deptId));
   log.info("#######################  查询设备列表结束并分页 #######################");
   return LayuiPageFactory.createPageInfo(page);
}

Service:
/**
* 查询全部设备信息 带回类型、部门信息
 * 分页
 * @param name 模糊查询：设备名、设备编码、端口号\IP地址
 * @param deptId 部门id
 * @return
 */
List<DeviceDto> findAllDevice(Page page, String name, Long deptId);

ServiceImpl:
/**
* 根据条件查询设备列表
*
* @author ChengXY
* @data 2020-07-09 10:52
*/
List<DeviceDto> selectDevices(@Param("page") Page page,@Param("name") String name, @Param("deptId") Long deptId, @Param("deptIdParam") String deptId1);

Dao：
<!-- 查询全部设备信息（携带设备类型、部门信息） -->
<select id="selectDevices" resultType="cn.stylefeng.guns.modular.deviceModule.model.DeviceDto"
        parameterType="com.baomidou.mybatisplus.extension.plugins.pagination.Page">
  select
  <include refid="All_Column_List"/>
  from tl_device_info di
  left join tl_device_type dt on di.device_type_id = dt.id
  left join sys_dept sd on di.department_id = sd.dept_id
  LEFT JOIN sys_file_info fi on di.device_picture = fi.file_id
  LEFT JOIN sys_user su on di.operator = su.user_id
  LEFT JOIN sys_user su1 on di.functionary = su1.user_id
  where di.del_flag = 0
  <if test="name != null and name != ''">
    and (device_name like CONCAT('%',#{name},'%')
    or device_number like CONCAT('%',#{name},'%')
    or device_IP_address like CONCAT('%',#{name},'%')
    or device_IP_port like CONCAT('%',#{name},'%'))
  </if>
  <if test="deptId != null ">
    and (di.department_id = #{deptId} or di.department_id in ( select dept_id from sys_dept where pids like #{deptIdParam}))
  </if>
</select>

成功显示：

layui 分页之后没有记录之前勾选项的功能 ， 自己写了一个 ， 主要点就是表格的done 函数 ，每次渲染完成之后做表格勾选操作。然后需要一个全局变量记录所有已经勾选的项 。下面是自己的代码 。
首先，监听表格的复选框点击事件 ， 将单选或全选全部记录下来
    var checkArray = new Array();
    // 当前页数据
    var currentArray ;
            //监听行单击事件（单击事件为：rowDouble）
            table.on('checkbox(test)', function(obj){
                var checkData = obj.data ;
                // 如果是全选中
                if(obj.type == 'all' && obj.checked == true){
                    var checkStatus = table.checkStatus('demo')
                        ,data = checkStatus.data;

                    for(var i in data){
                        // 如果包含就去掉 ，不包含就添加
                        if(checkArray.indexOf(data[i].eventTypeName) > -1){
                        }else {
                            checkArray.push(data[i].eventTypeName) ;
                        }
                    }
                }
                // 全不选中
                else if(obj.type == 'all' && obj.checked == false){

                    for(var i in currentArray){
                        checkArray.remove(currentArray[i].eventTypeName) ;
                    }
                }
                // 如果是单选
                else {
                    var eventTypeName = checkData.eventTypeName ;
                    // 如果包含就去掉 ，不包含就添加
                    if(checkArray.indexOf(eventTypeName) > -1){
                        checkArray.remove(eventTypeName) ;
                    }else {
                        checkArray.push(eventTypeName) ;
                    }
                }
            });

然后 ，
done: function(res, curr, count){
                    //如果是异步请求数据方式，res即为你接口返回的信息。
                    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                    currentArray = res.data ;

                    //.假设你的表格指定的 id="maintb"，找到框架渲染的表格
                    var tbl = $('#demo').next('.layui-table-view');

                    // 渲染选择框
                    for(var i in currentArray){

                        for(var j in checkArray){
                            if(currentArray[i].eventTypeName == checkArray[j]){
                                tbl.find('table>tbody>tr').eq(i).find('td').eq(0).find('input[type=checkbox]').prop('checked', true);
                            }
                        }
                    }

                    form.render('checkbox');
                }