layui表格分页

本人也是自学layui，看了网上很多表格分页的帖子，感觉都摸不着头脑，自己摸索了半天，总算是实现了
首先说下我用的是springboot+ssm
效果图如下

那么我们开始吧
先在pom.xml文件中导入分页插件

	<dependency>
		<groupId>com.github.pagehelper</groupId>
		<artifactId>pagehelper-spring-boot-starter</artifactId>
		<version>1.2.2</version>
	</dependency>

前台jsp页面如下

<table id="emptable"></table>
	<div id="empdiv"></div>
	<script src="/layui/layui.js"></script>
	<script src="/js/jquery.min.js"></script>
	<script type="text/javascript">
	layui.use(['table','laypage'], function(){
		  var table = layui.table;
		  var laypage = layui.laypage;
		  //第一个实例
		  table.render({
		    elem: '#emptable'
		    ,height: 450
		    ,url: 'employee/pageList' //数据接口
		    ,cols: [[ //表头
		      {type: 'checkbox', fixed: 'left'}
		      ,{field: 'id', title: 'ID', width:120, sort: true, fixed: 'left'}
		      ,{field: 'username', title: '用户名', width:120}
		      ,{field: 'tel', title: '手机号码', width:120, sort: true}
		      ,{field: 'email', title: '邮箱', width:200} 
		      ,{field: 'department', title: '部门', width: 120,templet:function(d){
		    		//这里的d指的是每一行的所有数据
		    	  return d.department.name!=null?(d.department.name):"";
		      }}
		      ,{field: 'inputtime', title: '入职时间', width: 150, sort: true}
		      ,{field: 'state', title: '状态', width: 120, sort: true}
		    ]]
		  });
		
	//执行一个laypage实例
	  laypage.render({
	    elem: 'empdiv' //注意，这里的 test1 是 ID，不用加 # 号
	    //动态获取总条数
	    ,count: '<%= session.getAttribute("count")%>'
	    ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
	    ,jump:function(obj,first) {//点击页数按钮触发的函数
	    	//第一次进不用重新刷新页面
	    	if(!first){
	    		//异步取得数据,作更新页面操作
	            var curr=obj.curr;
	            var limit=obj.limit;
	            table.reload('emptable', {
	            	  url: 'employee/pageList'
	            	  ,where: {"curr":curr,"limit":limit} //设定异步数据接口的额外参数
	            	});
	    	}
        }
	  });
	});
	</script>

后台代码如下

@RequestMapping("/pageList")
	@ResponseBody
	public Object pageList(Integer curr,Integer limit,HttpSession session){
		/*
		 * layui中table要求的json格式
		 *  code:0 //数据状态
			msg:"" //状态信息
			count:1000 //数据总数
			data:[] //数据列表
		 */
		Map<String,Object> map=new HashMap<>();
		PageHelper.startPage(curr, limit);
		List<Employee> list=employeeService.selectAll();
		int count = employeeService.selectCount();
		session.setAttribute("count", count);
		map.put("code", 0);
		map.put("msg", "");
		map.put("count", count);
		map.put("data", list);
		return map;
	}

大功告成
要点总结:
1.后台返回的json格式必须要满足table指定的格式
code:0 //数据状态
msg:"" //状态信息
count:1000 //数据总数
data:[] //数据列表

2.每次jump都需要提交新的curr和limit到后台重写加载表格