layui表格分页前后台完整示例

上一篇呢，介绍了如何利用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     &lt;!&ndash; 引入layui js &ndash;&gt;
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表格的动态分页，效果图如下所示：