关于layui table分页的实现

这是我做的一个demo

使用layui table 分页我饶了不少圈子，主要的锅只能怪自己太懒

先上layui官方文档： 

刚开始我忽略了这一句话，我以为layui已经写好了分页，只需要我传入参数就行[手动滑稽] ，所以希望看到这篇帖子的像我一样的小白，请打消这个懒惰念头。

ennnn不多说上思路：

HTML：

js：

<script type="text/javascript">
            
                console.log(obj);
                    layui.use('table',function(){
                    var table = layui.table;
                    table.render({
                        elem: '#test3'
                        ,url:'insertDataForSelectServlet' 
                        ,toolbar: true
                        ,title: '用户数据表'
                        ,totalRow: true
                        ,cols: [[
                              {field:'name', title:'姓名', width:100, fixed: 'left',  sort: true, totalRowText: '合计行'}
                              ,{field:'College', title:'学院', width:100}
                              ,{field:'major', title:'专业', width:100,}
                              ,{field:'tClass', title:'班级', width:80}
                              ,{field:'dNub', title:'宿舍', width:80}
                              ,{field:'Is_leave', title:'请假', width:80,edit: 'text'}
                              ,{field:'Time_for_leave', title:'请假时间', width:120,edit: 'text'}
                              ,{field:'Stay_out_late', title:'晚归', width:80,edit: 'text'}
                              ,{field:'Late_return_time',title:'回寝时间',width:120,edit: 'text'}
                              ,{field:'No_return', title:'未归',  width:80, edit: 'text',edit: 'text'}
                              ,{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}
                            ]]
                            ,page: true
                            ,response: {
                          statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                          
                    }
                    ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
                      return {
                        "code": res.status, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.datasize, //解析数据长度
                        "data": res.rows.item //解析数据列表
                      };
                    }
                  });
            });
            
                </script>

这里没什么好说的 官方文档已经说烂了，

从上面可以看出 我url访问的是一个servlet，我们来看servlet：
    

     *  a.limit  页面显示数据条目数
     *  b.page  当前页码
     *  c.countItem 数据总数
     *  limit page layui开启page之后会默认传递这两个参数，问题就是获取countItem 
     *  写一下layui table 分页实现思路：table开启分页之后会默认传递page limit 两个参数，你在后台获取
     *  String sql = "select * from table limit ((page - 1)*limit),limit;"
     *  然后获取需要显示数据的总条目数，问题就在这，上面的sql只会显示limit条数据，而不是全部数据
     *  所以只能通过count(*) 查询"select * from table" 获取全部数据条目数

-------------------------------------------------------------------------补充上mapToJSON方法----------------------------------------------------------------

 

	public static JSONObject mapToJSON(List<Map<String,Object>> listMap,Object [] param,String sql){
				ManagerDaoImplement daoImplement = new ManagerDaoImplement();
				
				countAllAtt = daoImplement.count(sql, param);
				//主体JSON
				JSONObject jsonMain = new JSONObject();
				//Item:[{}]
				JSONObject jsonItem = new JSONObject();
				//item:[{}] 内容
				JSONArray array = new JSONArray();
				
				for(Map<String, Object> map : listMap){
					JSONObject jsonObject =JSONObject.fromObject(map);
					array.add(jsonObject);
				}
				//为item 添加值
				jsonItem.put("item", array);
				//JOSN 添加 status
				jsonMain.put("status", 200);
				//JOSN 添加 message
				jsonMain.put("message","");
				//JOSN 添加 datasize
				jsonMain.put("datasize",countAllAtt);
				//System.out.println(countItem);
				//JOSN 添加 rows rows为item
				jsonMain.put("rows", jsonItem);
				//System.out.println(jsonMain);
		
		return jsonMain;
	}

 

ennn，以上就是我实现分页的方法，本人刚刚接触layui 对web开发了解不深，有什么问题恳请各位前辈指点，

推荐一篇关于layui table分页的帖子：https://fly.layui.com/jie/13071/