分页实现

前端基于Bootstrap的轻量级表格插件 BootstrapTable后端分页组件使用Mybatis分页插件 PageHelper

分页实现流程

1、前端调用封装好的方法$.table.init，传入后台url。

  1. var options = {
  2.     url: prefix + "/list",
  3.     columns: [{
  4.         field: 'id',
  5.         title: '主键'
  6.     },
  7.     {
  8.         field: 'name',
  9.         title: '名称'
  10.     }]
  11. };
  12. $.table.init(options);

2、自定义查询条件参数（特殊情况提前设置查询条件下使用）

  1. var options = {
  2.     url: prefix + "/list",
  3.     queryParams: queryParams,
  4.     columns: [{
  5.         field: 'id',
  6.         title: '主键'
  7.     },
  8.     {
  9.         field: 'name',
  10.         title: '名称'
  11.     }]
  12. };
  13. $.table.init(options);
  15. function queryParams(params) {
  16.     var search = $.table.queryParams(params);
  17.     search.userName = $("#userName").val();
  18.     return search;
  19. }

3、后台实现查询逻辑，调用startPage()方法即可自动完成服务端分页。

  1. @PostMapping("/list")
  2. @ResponseBody
  3. public TableDataInfo list(User user)
  4. {
  5.     startPage();  // 此方法配合前端完成自动分页
  6.     List<User> list = userService.selectUserList(user);
  7.     return getDataTable(list);
  8. }

常见坑点1：selectPostById莫名其妙的分页。例如下面这段代码

  1. startPage();
  2. List<User> list;
  3. if(user != null){
  4.     list = userService.selectUserList(user);
  5. } else {
  6.     list = new ArrayList<User>();
  7. }
  8. Post post = postService.selectPostById(1L);
  9. return getDataTable(list);

原因分析：这种情况下由于user存在null的情况，就会导致PageHelper生产了一个分页参数，但是没有被消费，这个参数就会一直保留在这个线程上。当这个线程再次被使用时，就可能导致不该分页的方法去消费这个分页参数，这就产生了莫名其妙的分页。上面这个代码，应该写成下面这个样子才能保证安全。

  1. List<User> list;
  2. if(user != null){
  3.     startPage();
  4.     list = userService.selectUserList(user);
  5. } else {
  6.     list = new ArrayList<User>();
  7. }
  8. Post post = postService.selectPostById(1L);
  9. return getDataTable(list);

常见坑点2：添加了startPage方法。也没有正常分页。例如下面这段代码

  1. startPage();
  2. Post post = postService.selectPostById(1L);
  3. List<User> list = userService.selectUserList(user);
  4. return getDataTable(list);

原因分析：只对该语句以后的第一个查询（Select）语句得到的数据进行分页。上面这个代码，应该写成下面这个样子才能正常分页。

  1. Post post = postService.selectPostById(1L);
  2. startPage();
  3. List<User> list = userService.selectUserList(user);
  4. return getDataTable(list);

注意：如果改为其他数据库需修改配置application.yml helperDialect=你的数据库