上一篇呢，介绍了如何利用layui的分页进行前后台数据交互。接下来，介绍layui表格数据如何分页。
然后，表格数据的异步请求的一些参数说明可以参考layui的官方文档：文档跳转；如果看不懂的话，也可以参考这个视频地址：视频跳转
接下来开始layui表格分页前后端动态交互的步骤以及具体代码实现：
这里使用到的数据以及springboot的工程以及依赖什么的全部都是使用上一篇博文中的，如果不知道上一篇博文在那里的：跳转博主所说的上一篇
对了，mapper层以及service层都是用的同一个方法，因为目的就是查出数据库的全部用户数据而已，所以不用额外写方法。不同的是controller层和视图层而已
视图层:tableTest.html,内容如下：
1 <!DOCTYPE html> 2 <html lang="en" xmlns:th="http://www.thymeleaf.org"> 3 <head> 4 <meta charset="utf-8"> 5 <title>layui表格数据分页测试</title>
6 <link rel="stylesheet" type="text/css" href="../static/layui/css/layui.css"/> 7 <script src="../static/layui/layui.js" type="text/javascript" charset="utf-8"></script> 8 <!--线上引入样式--> 9 <!-- 引入layui css --> 10 <!-- <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" /> 11 <!– 引入layui js –> 12 <script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>--> 13 14 15 </head> 16 <body> 17 <script type="text/javascript" th:inline="none"> 18 //注意：如果这里是直接引用layui的模块使用的话，是需要在script标签中标记一下：th:inline="none"表示不用视图解释器进行该语句的解释。用引进的静态资源加载即可 19 layui.use(['table','layer'], function(){ 20 var table = layui.table; 21 table.render({ 22 elem: '#demo' 23 ,url: 'table/userInfo' //数据接口 24 ,page: true //开启分页 25 ,reload:true // 26 //,toolbar:true 27 //,title:'用户信息表'//这个的作用并不是为表格添加标题,而是为导出的文明命名的.如果想添加一个标题,需要自己手动-添加标题,然后添加样式什么的 28 ,cols: [[ //表头 29 {field: 'id', title: 'ID', sort: true, fixed: 'left',align:'center'} 30 ,{field: 'username', title:'用户名',align:'center'} 31 ,{field: 'sex', title: '性别',sort: true,align:'center'} 32 ,{field: 'city', title: '城市',align:'center'} 33 ,{field: 'sign', title: '签名',align:'center'} 34 ,{field: 'experience', title: '积分',sort: true,align:'center'} 35 ,{field: 'score', title: '评分',sort: true,align:'center'} 36 ,{field: 'classify', title: '职业',align:'center'} 37 ,{field: 'wealth', title: '财富', sort: true,align:'center'} 38 ]] 39 }); 40 41 }); 42 </script> 43 <h2 align="center" >用户信息表</h2> 44 <table id="demo" lay-filter="test" ></table> 45 46 47 </body> 48 </html>
温馨提示：这里引入的layui的css样式和js文件的路径是需要写你自己对应的路径的
controller层
1 @Controller 2 public class UserController { 3 @Autowired 4 private UserService userService; 5 6 7 @RequestMapping("/table/userInfo") 8 @ResponseBody 9 public Map<String, Object> selectAllUer(@RequestParam(defaultValue = "1")Integer page, @RequestParam(defaultValue = "10")Integer limit) { 10 PageHelper.startPage(page, limit); 11 List<User> users = userService.selectAllUser(); 12 // userPageInfo的目的是获取到总的页数 13 PageInfo<User> usersPageInfo = new PageInfo<>(users); 14 Map<String, Object> map = new HashMap<>(); 15 if (users != null) { 16 map.put("code", 0); 17 }else { 18 map.put("code", 500); 19 } 20 map.put("msg", "查询成功！"); 21 map.put("count", usersPageInfo.getTotal()); 22 // 这个也是可以的 23 // map.put("data", uusersPageInfo.getList()); 24 map.put("data", users); 25 return map; 26 } 27 28 @RequestMapping("/index") 29 public String index(){ 30 return "tableTest"; 31 } 32 }
如此一来就完成了layui表格的动态分页，效果图如下所示：