Mybatis pageHelper 配合jquery DataTable实现分页效果

快来打我* 2022-05-29 01:38 366阅读 0赞 
  1. Hibernate中集成了分页的后台方法，Mybatis中没有，想要方便的使用分页功能，就必须使用牛人开发的pageHelper插件。前台配合jquery的datatable或者jqGrid实现列表效果，本次使用的是datatable。

首先想看官方详细文档请看，非常全面

http://datatables.club/

另外我找到一片非常详细的介绍datatable的文章

https://www.cnblogs.com/xiashengwang/p/8087181.html

  1. **一 . pagehelper配置及使用介绍**
  3. 1.我用的maven工程，首先引入依赖
  5. <!--分页-->
  6.         <dependency>
  7.             <groupId>com.github.pagehelper</groupId>
  8.             <artifactId>pagehelper</artifactId>
  9.             <version>4.1.1</version>
  10.         </dependency>

2.在mybatis配置文件spring-mybatis.xml中配置

  1. <!-- spring和MyBatis完美整合，不需要mybatis的配置映射文件 -->    
  2.  <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">    
  3.      <property name="dataSource" ref="dataSource" />    
  4.      <!-- 自动扫描mapping.xml文件 -->    
  5.      <property name="mapperLocations">
  6.          <array>
  7.              <value>classpath:com/zhuhuixin/webmana/dao/mapper/xml/*.xml</value>
  8.              <value>classpath:com/zhuhuixin/webshow/dao/mapper/xml/*.xml</value>
  9.          </array>
  10.      </property>
  11.      <property name="plugins">  //在此处配置
  12.          <array>
  13.              <bean class="com.github.pagehelper.PageHelper">
  14.                  <property name="properties">
  15.                      <value>
  16.                          dialect=mysql
  17.                          reasonable=true
  18.                      </value>
  19.                  </property>
  20.              </bean>
  21.          </array>
  22.      </property>
  23.  </bean>

3.datatable将会默认发送给你draw,start（开始条数）,length（每页条数）,但pagehelper要的参数为当前页码和每页条数，所以要将start处理一下,currentPage=start/length+1。

  1. 设置完PageHelper.startPage(currentPage,pageSize)后的第一个使用查询方法，mybatis会自动使用分页功能，查询出的list就是分页后的值
  3. // 获取用户列表
  4. @ResponseBody
  5. @RequestMapping(value = "listUser", produces = "text/plain;charset=UTF-8")
  6. public String listUser(Integer start,Integer length,HttpServletRequest req) {
  7.     List<TSystemUser> list = new ArrayList<TSystemUser>();
  8.     Map resultMap = new HashMap();
  9.     PageHelper.startPage((start/length+1),length); //第一个参数为当前页码，第二个为每页的条数
  10.     try {
  11.         list = userService.findUserByCondition(userParam);  //之后的第一个查询方法
  12.         Page<TSystemUser> pageBean = new Page<TSystemUser>(new PageInfo<TSystemUser>(list),req);
  13.         //如果直接则自动去掉为null的字段，不想去掉需要这样处理
  14.         return JSON.toJSONString(pageBean, SerializerFeature.WriteMapNullValue);
  15.     } catch (Exception e) {
  16.         e.printStackTrace();
  17.         resultMap.put("success","false");
  18.         resultMap.put("msg",e.getMessage());
  20.     }
  21.     return JSON.toJSONString(resultMap);
  22. }
  24. PageInfo类说明
  26. public class PageInfo<T> implements Serializable {  
  27.     private static final long serialVersionUID = 1L;  
  28.     //当前页  
  29.     private int pageNum;  
  30.     //每页的数量  
  31.     private int pageSize;  
  32.     //当前页的数量  
  33.     private int size;  
  35.     //由于startRow和endRow不常用，这里说个具体的用法  
  36.     //可以在页面中"显示startRow到endRow 共size条数据"  
  38.     //当前页面第一个元素在数据库中的行号  
  39.     private int startRow;  
  40.     //当前页面最后一个元素在数据库中的行号  
  41.     private int endRow;  
  42.     //总记录数  
  43.     private long total;  
  44.     //总页数  
  45.     private int pages;  
  46.     //结果集  
  47.     private List<T> list;  
  49.     //前一页  
  50.     private int prePage;  
  51.     //下一页  
  52.     private int nextPage;  
  54.     //是否为第一页  
  55.     private boolean isFirstPage = false;  
  56.     //是否为最后一页  
  57.     private boolean isLastPage = false;  
  58.     //是否有前一页  
  59.     private boolean hasPreviousPage = false;  
  60.     //是否有下一页  
  61.     private boolean hasNextPage = false;  
  62.     //导航页码数  
  63.     private int navigatePages;  
  64.     //所有导航页号  
  65.     private int[] navigatepageNums;  
  66.     //导航条上的第一页  
  67.     private int navigateFirstPage;  
  68.     //导航条上的最后一页  
  69.     private int navigateLastPage;  
  71.     public PageInfo() {  
  72.     }  
  74.     /** 
  75.      * 包装Page对象 
  76.      * 
  77.      * @param list 
  78.      */  
  79.     public PageInfo(List<T> list) {  
  80.         this(list, 8);  
  81.     }  
  83.     /** 
  84.      * 包装Page对象 
  85.      * 
  86.      * @param list          page结果 
  87.      * @param navigatePages 页码数量 
  88.      */  
  89.     public PageInfo(List<T> list, int navigatePages) {  
  90.         if (list instanceof Page) {  
  91.             Page page = (Page) list;  
  92.             this.pageNum = page.getPageNum();  
  93.             this.pageSize = page.getPageSize();  
  95.             this.pages = page.getPages();  
  96.             this.list = page;  
  97.             this.size = page.size();  
  98.             this.total = page.getTotal();  
  99.             //由于结果是>startRow的，所以实际的需要+1  
  100.             if (this.size == 0) {  
  101.                 this.startRow = 0;  
  102.                 this.endRow = 0;  
  103.             } else {  
  104.                 this.startRow = page.getStartRow() + 1;  
  105.                 //计算实际的endRow（最后一页的时候特殊）  
  106.                 this.endRow = this.startRow - 1 + this.size;  
  107.             }  
  108.         } else if (list instanceof Collection) {  
  109.             this.pageNum = 1;  
  110.             this.pageSize = list.size();  
  112.             this.pages = this.pageSize > 0 ? 1 : 0;  
  113.             this.list = list;  
  114.             this.size = list.size();  
  115.             this.total = list.size();  
  116.             this.startRow = 0;  
  117.             this.endRow = list.size() > 0 ? list.size() - 1 : 0;  
  118.         }  
  119.         if (list instanceof Collection) {  
  120.             this.navigatePages = navigatePages;  
  121.             //计算导航页  
  122.             calcNavigatepageNums();  
  123.             //计算前后页，第一页，最后一页  
  124.             calcPage();  
  125.             //判断页面边界  
  126.             judgePageBoudary();  
  127.         }  
  128.     }  
  131. .......  
  132. }
  136. 本来查询完需要用 PageInfo data=new PageInfo<>(list)封装就行，但是我们要返回给datatable合适的值，所以我将data二次封装。直接返回pagebean则为datatable需要接受的参数。
  140. **这里要注意不要使用JSON.toJSONString(pagebean),因为此方法默认值为null的字段被自动去除，没有字段前台的datatable就会报错。用使用JSON.toJSONString(pageBean,SerializerFeature.WriteMapNullValue)才能正常返回。**

封装类：

  1. public class Page<T> {
  3.     /**
  4.      * <p>Title: </p>
  5.      * <p>Description: 构造函数，传入一个com.github.pagehelper.PageInfo对象</p>
  6.      *
  7.      * @param pageInfo
  8.      */
  9.     public Page(PageInfo<T> pageInfo,HttpServletRequest req) {
  10.         try {
  11.             this.setDraw(req.getParameter("draw"));//从request中获取的draw在发回去
  12.             this.setPageSize(pageInfo.getPageSize());
  13.             this.setRecordsTotal(pageInfo.getTotal());
  14.             this.setRecordsFiltered(pageInfo.getTotal());
  15.             this.setData(pageInfo.getList());
  16.         } catch (Exception e) {
  17.             e.printStackTrace();
  18.         }
  19.     }
  21.     // 当前页
  22.     private String draw;
  23.     // 总页数
  24.     private Integer total;
  25.     // 每页显示多少
  26.     private Integer pageSize;
  27.     // 总记录数
  28.     private long recordsTotal;
  29.     private long recordsFiltered;
  30.     // 记录
  31.     private List<T> data;
  33.     public String getDraw() {
  34.         return draw;
  35.     }
  37.     public void setDraw(String draw) {
  38.         this.draw = draw;
  39.     }
  41.     public Integer getTotal() {
  42.         return total;
  43.     }
  45.     public void setTotal(Integer total) {
  46.         this.total = total;
  47.     }
  49.     public Integer getPageSize() {
  50.         return pageSize;
  51.     }
  53.     public void setPageSize(Integer pageSize) {
  54.         this.pageSize = pageSize;
  55.     }
  57.     public long getRecordsTotal() {
  58.         return recordsTotal;
  59.     }
  61.     public void setRecordsTotal(long recordsTotal) {
  62.         this.recordsTotal = recordsTotal;
  63.     }
  65.     public long getRecordsFiltered() {
  66.         return recordsFiltered;
  67.     }
  69.     public void setRecordsFiltered(long recordsFiltered) {
  70.         this.recordsFiltered = recordsFiltered;
  71.     }
  73.     public List<T> getData() {
  74.         return data;
  75.     }
  77.     public void setData(List<T> data) {
  78.         this.data = data;
  79.     }
  80. }

二 . 前台datatable的配置及使用

  1. 要注意前台传给后台的参数和需要接受的参数。
  3. 前端传递参数：  
  4. columns[0][data]    0  
  5. columns[0][name]      
  6. columns[0][orderable]    true  
  7. columns[0][search][regex]    false  
  8. columns[0][search][value]      
  9. columns[0][searchable]    true  
  10. columns[1][data]    1  
  11. columns[1][name]      
  12. columns[1][orderable]    true  
  13. columns[1][search][regex]    false  
  14. columns[1][search][value]      
  15. columns[1][searchable]    true  
  16. columns[2][data]    2  
  17. columns[2][name]      
  18. columns[2][orderable]    true  
  19. columns[2][search][regex]    false  
  20. columns[2][search][value]      
  21. columns[2][searchable]    true  
  22. columns[3][data]    3 // data[3]  
  23. columns[3][name]      
  24. columns[3][orderable]    true         //可以排序  
  25. columns[3][search][regex]    false         //搜索内容不支持正则表达式  
  26. columns[3][search][value]    //搜索的内容  
  27. columns[3][searchable]    true  //可以被搜索  
  28. draw    1    //浏览器cache的编号，递增不可重复  
  29. length    10 //预读长度= 预读页数*每页行数  
  30. order[0][column]    0  //按第一列排序  
  31. order[0][dir]    asc  
  32. search[regex]    false //搜索内容不支持正则表达式  
  33. search[value]    //输入的搜索的内容  
  34. start    0//起始位子，如第一页就从  
  36. 返回值格式：  
  37. {  
  38.   "draw": 10, //浏览器cache的编号，递增不可重复  
  39.   "recordsTotal": 57, //数据总行数  
  40.   "recordsFiltered": 57, //数据总行数  
  41.   "data": [  
  42.     [  
  43.       "Cara",  
  44.       "Stevens",  
  45.       "Sales Assistant",  
  46.       "New York",  
  47.       "6th Dec 11",  
  48.       "$145,600"  
  49.     ],  
  50.     [  
  51.       "Shou",  
  52.       "Itou",  
  53.       "Regional Marketing",  
  54.       "Tokyo",  
  55.       "14th Aug 11",  
  56.       "$163,000"  
  57.     ]  
  58.   ]  
  59. }
  61. 我封装的pagebean符合接受参数要求，所以直接开始使用。如果不封装，想自定义设置接受参数，需要加入dataSrc(下面有示例),依次把draw，recordstotal,recordsfiltered,data设置一遍（**注意draw，recordstotal,recordsfiltered,data必须为json的一级子集，不然无效**），最后返回**json.data**
  63. 栗子：
  65. var tableObj = null;
  66. var tableColumns = [
  67.                   {data:"userId",className:'text-c',title: "<input type='checkbox' name='checklist' id='checkall' />", width:10},
  68.                   {data:"loginName", title:"登录名"},
  69.                   {data:"userName", title:"姓名"},
  70.                   {data:"userGender", title:"性别"},
  71.                   {data:"userPhone", title:"电话"},
  72.                   {data:"userStatus", title:"是否启用"},
  73.                   {data:"userId", title:"操作", width:100}
  74.                ];
  76. tableObj =  $('.table-sort').DataTable({
  77.     serverSide:true,//设为true为后台处理分页
  78.     searching:false,
  79.     ordering:false,
  80.     processing:true,
  81.     stateSave:false,
  82.     autoWidth:false,
  83.     ajax:{
  84.         url:"listUser.do",
  85.         type:"post",
  86.         data:function(d){
  87.            // d.currentPage= d.start;  //可以改变往前台传的参数名
  88.           //  d.pageSize= d.length;
  89.             return $.extend( {}, d, {  //往前台传自定义参数要这么写
  90.                 "info": $('#info').val(),
  91.                 "orgId": $('#orgId').val(),
  92.                 "roleId": $('#roleId').val(),
  93.                 "userLimit": $("select[name='userLimit']").val()
  94.             });
  95.         },
  96.         /*dataSrc: function (json) { // 想处理返回参数时这样做，因为我已经封装了返回参数，这里就不需要了
  97.             /!*console.log(json)
  98.             json.recordsTotal=json.total;
  99.             json.recordsFiltered=json.total;
  100.             json.data=json.list;*!/
  101.             return json.data;
  102.         },*/
  103.     },
  105.     columns:tableColumns,
  106.     columnDefs: [
  107.          {
  108.             //第一列checkbox
  109.             targets: 0,
  110.             render: function(data, type, row, meta) {
  111.                 return '<input type="checkbox" name="checklist" value="' + data + '" />'
  112.             }
  113.          }
  114.      ]
  115. });

recordstotal,recordsfiltered为总记录数，在pageInfo里面自带，draw为前台传给后台的，后台要原样返回，不然分页效果会出错。 

  1. 总之用起来有点麻烦，耐心研究吧，配置好后还是很好用的

-——————————————————————————————————————————————————

补充：

最近又用到了这个插件，有一些问题弄了半天才解决，来记录一下

1.配置参数问题：旧版本配置参数名字都比较奇怪，前面总有类似“a”,”b”之类的前缀，比如‘autoWidth’成了‘bAutoWidth’,不过新版本的名字都正常了，直接写‘autoWidth’就行了，不要被某些文档搞晕；

2.如果数据源不直接用ajax请求，而是用参数data参数渲染，则在data中传入对象数组即可，注意不是json字符串

  1. var tableObj =  $('.table-right').DataTable({
  2.             ordering:false,
  3.             paging: false,//开启表格分页
  4.             autoWidth:false,
  5.             data:[{"GROUPID":"11","GROUPNAME":"名字一"},{"GROUPID":"22","GROUPNAME":"名字二"}],
  6.             columns:[
  7.                 {data:"userId",className:'text-c',title: "<input type='checkbox' name='checklist' id='checkall2' />", width:10},
  8.                 {data:"GROUPID", title:"营业厅编码"},
  9.                 {data:"GROUPNAME", title:"营业厅名称"}
  10.             ],
  11.             columnDefs: [
  12.                 {
  13.                     //第一列checkbox
  14.                     targets: 0,
  15.                     render: function(data, type, row, meta) {
  16.                         return '<input type="checkbox" name="checklist" class="checklist2" value="' + row.GROUPID + '" />'
  17.                     }
  18.                 }
  19.             ],
  21.         });

3.重新加载表格

  1. function reloadTable() {
  2.     //参数1：当服务器返回数据并重绘完毕时执行此回调方法，回调方法返回的是服务器返回的数据
  3.     //参数2：重置（默认或者设置为true）或者保持分页信息（设置为false）
  4.     tableObj.ajax.reload(function(data){}, false);
  6. }

4.换url重新加载

  1. table.ajax.url( 'newData.json').load();

5.清空表格数据

  1. tableObj1.clear().draw()

6.销毁表格

  1. tableObj1.destroy(false)

false为销毁数据但html还在，true直接连html也销毁了，慎用true

发表评论

表情：
评论列表 （有 0 条评论，366人围观）

还没有评论，来说两句吧...

相关阅读

    相关 datatables实现分页

    datatables实现分页分为客户端分页和服务端分页两种，客户端分页很简单，只要把返回的所有数据根据dataSrc设置好就可以了。 这里说一下服务端分页的实现。 html

    柔光的暖阳◎柔光的暖阳◎/ 0 赞/ 645 阅读