使用的是：Mybatis-Plus的分頁插件
https://baomidou.gitee.io/mybatis-plus-doc/#/?id=%E7%AE%80%E4%BB%8B
1、Mapper.java
List<SysUser> selectPageUserList(Page page, SysUser user);
2、serviceImpl
public Page<SysUser> selectUserPage(SysUser user, Integer current, Integer pageSize) { Page<SysUser> page = new Page<SysUser>(current, pageSize);// 當前頁，總條數 構造 page 對象 //sql優化，OptimizeCountSql默認為true，優化，不執行select count(1)操作 //page.setOptimizeCountSql(false); // 查詢總記錄數，默認是查詢 // page.setSearchCount(false); // 注意！！ 分頁 total 是經過插件自動 回寫 到傳入 page 對象 return page.setRecords(baseMapper.selectPageUserList(page, user)); }
3、controller
@RequestMapping(value = "/list", method = RequestMethod.POST) @ResponseBody public ModelAndView doList(SysUser su, SplitPage splitPage){ ModelAndView mav = new ModelAndView("m/user/listUser"); Page<SysUser> pageInfo = sysUserService.selectUserPage(su,splitPage.getPageNumber(),splitPage.getPageSize()); PageInfo<SysUser> pageResult = new PageInfo<SysUser>(); pageResult.setPageSize(splitPage.getPageSize()); // 返回當前頁碼 pageResult.setPage(pageInfo.getCurrent()); // 返回總記錄數 pageResult.setRecords(pageInfo.getTotal()); // 返回總頁數 pageResult.setTotal(pageInfo.getPages()); // 返回查詢數據 pageResult.setRows(pageInfo.getRecords()); mav.addObject("pageInfo",pageResult); return mav; } @RequestMapping(value = "/userData", method = RequestMethod.POST) @ResponseBody public ModelAndView getData(SysUser su, SplitPage splitPage){ ModelAndView mav = new ModelAndView("m/user/user :: userData"); Page<SysUser> pageInfo = sysUserService.selectUserPage(su,splitPage.getPageNumber(),splitPage.getPageSize()); PageInfo<SysUser> pageResult = new PageInfo<SysUser>(); pageResult.setPageSize(splitPage.getPageSize()); // 返回當前頁碼 pageResult.setPage(pageInfo.getCurrent()); // 返回總記錄數 pageResult.setRecords(pageInfo.getTotal()); // 返回總頁數 pageResult.setTotal(pageInfo.getPages()); // 返回查詢數據 pageResult.setRows(pageInfo.getRecords()); mav.addObject("pageInfo",pageResult); return mav; }
4、html頁面(thymeleaf)
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div th:fragment="page(url,searchForm,tablelist)" class="col-xs-12"> <div class="col-xs-6"> <div class="dataTables_info" id="dynamic-table_info" role="status" aria-live="polite"> 共<strong th:text="${pageInfo.records}"/>條數據 </div> </div> <div class="col-xs-6"> <div class="dataTables_paginate paging_simple_numbers" id="table_paginate"> <input th:hidden="true" id="pageNumber" name="pageNumber" th:value="${pageInfo.page}"/> <!-- 處理頁數小於等於7 的情況 --> <ul th:if="${(pageInfo.total le 7)&&(pageInfo.total gt 0)}" class="pagination"> <li th:if="${pageInfo.page eq 1}" class="page-item disabled"><a class="page-link" href="#">上一頁</a></li> <li th:if="${pageInfo.page gt 1}" class="page-item"> <a class="page-link" href="javascript:void(0);" th:onclick="'javascript:splitPageLink(\''+${url}+'\',\''+${searchForm}+'\',\''+${tablelist}+'\','+${pageInfo.page}+'-1)'" >上一頁</a> </li> <li th:each="index:${#numbers.sequence(1,pageInfo.total)}" th:classappend="${index eq pageInfo.page}?'active'" class="page-item"> <a class="page-link" href="javascript:void(0);" th:onclick="'javascript:splitPageLink(\''+${url}+'\',\''+${searchForm}+'\',\''+${tablelist}+'\',\''+${index}+'\')'" th:text="${index}"></a> </li> <li th:if="${pageInfo.page eq pageInfo.total}" class="page-item disabled"> <a class="page-link" href="#">下一頁</a> </li> <li th:if="${pageInfo.page lt pageInfo.total}" class="page-item"> <a class="page-link" href="javascript:void(0);" th:onclick="'javascript:splitPageLink(\''+${url}+'\',\''+${searchForm}+'\',\''+${tablelist}+'\','+${pageInfo.page}+'+1)'">下一頁</a> </li> </ul> <!-- 處理頁數大於7 的情況 --> <ul th:if="${pageInfo.total gt 7}" class="pagination"> <li th:if="${pageInfo.page eq 1}" class="page-item disabled"> <a class="page-link" href="#">上一頁</a> </li> <li th:if="${pageInfo.page gt 1}" class="page-item"> <a class="page-link" href="javascript:void(0);" th:onclick="'javascript:splitPageLink(\''+${url}+'\',\''+${searchForm}+'\',\''+${tablelist}+'\','+${pageInfo.page}+'-1)'">上一頁</a> </li> <!-- 首頁 --> <li th:classappend="${pageInfo.page eq 1}?'active'" class="page-item"> <a class="page-link" href="javascript:void(0);" th:onclick="'javascript:splitPageLink(\''+${url}+'\',\''+${searchForm}+'\',\''+${tablelist}+'\','+'1)'">1</a> </li> <!-- 當前頁面小於等於7 --> <li th:if="${pageInfo.page le 4}" th:each="index:${#numbers.sequence(2,5)}" th:classappend="${index eq pageInfo.page}?'active'" class="page-item"> <a href="javascript:void(0);" th:onclick="'javascript:splitPageLink(\''+${url}+'\',\''+${searchForm}+'\',\''+${tablelist}+'\',\''+${index}+'\')'" class="page-link" th:text="${index}"></a> </li> <li th:if="${pageInfo.page le 4}" class="page-item"> <a class="page-link" href="javascript:void(0);" th:onclick="'javascript:splitPageLink(\''+${url}+'\',\''+${searchForm}+'\',\''+${tablelist}+'\','+'6)'">...</a> </li> <!-- 最后一頁與當前頁面之差小於等於3 --> <li th:if="${pageInfo.total-pageInfo.page le 3}" class="page-item"> <a class="page-link" href="javascript:void(0);" th:onclick="'javascript:splitPageLink(\''+${url}+'\',\''+${searchForm}+'\',\''+${tablelist}+'\','+${pageInfo.total}+'-5)'">...</a> </li> <li th:if="${pageInfo.total-pageInfo.page le 3}" th:each="index:${#numbers.sequence(pageInfo.total-4,pageInfo.total-1)}" th:classappend="${index eq pageInfo.page}?'active'" class="page-item"> <a href="javascript:void(0);" th:onclick="'javascript:splitPageLink(\''+${url}+'\',\''+${searchForm}+'\',\''+${tablelist}+'\',\''+${index}+'\')'" class="page-link" th:text="${index}"></a> </li> <!-- 最后一頁與當前頁面之差大於3 且當前頁面大於4 --> <li th:if="${(pageInfo.page gt 4) && (pageInfo.total-pageInfo.page gt 3)}" class="page-item"> <a class="page-link" href="javascript:void(0);" th:onclick="'javascript:splitPageLink(\''+${url}+'\',\''+${searchForm}+'\',\''+${tablelist}+'\','+${pageInfo.page}+'-2)'">...</a> </li> <li th:if="${(pageInfo.page gt 4) && (pageInfo.total-pageInfo.page gt 3)}" th:each="index:${#numbers.sequence(pageInfo.page-1,pageInfo.page+1)}" th:classappend="${index eq pageInfo.page}?'active'" class="page-item"> <a class="page-link" href="javascript:void(0);" th:onclick="'javascript:splitPageLink(\''+${url}+'\',\''+${searchForm}+'\',\''+${tablelist}+'\',\''+${index}+'\')'" th:text="${index}"></a> </li> <li th:if="${(pageInfo.page gt 4) && (pageInfo.total-pageInfo.page gt 3)}" class="page-item"> <a class="page-link" href="javascript:void(0);" th:onclick="'javascript:splitPageLink(\''+${url}+'\',\''+${searchForm}+'\',\''+${tablelist}+'\','+${pageInfo.page}+'+2)'">...</a> </li> <!-- 尾頁 --> <li th:classappend="${pageInfo.page eq pageInfo.total}?'active'" class="page-item"> <a class="page-link"href="javascript:void(0);" th:onclick="'javascript:splitPageLink(\''+${url}+'\',\''+${searchForm}+'\',\''+${tablelist}+'\',\''+${pageInfo.total}+'\')'" th:text="${pageInfo.total}"></a> </li> <li th:if="${pageInfo.page eq pageInfo.total}" class="page-item disabled"> <a class="page-link" href="#">下一頁</a> </li> <li th:if="${pageInfo.page lt pageInfo.total}" class="page-item"> <a class="page-link" href="javascript:void(0);" th:onclick="'javascript:splitPageLink(\''+${url}+'\',\''+${searchForm}+'\',\''+${tablelist}+'\','+${pageInfo.page}+'+1)'">下一頁</a> </li> </ul> </div> </div> </div> </body> </html>
5、js
function splitPageLink(url,searchForm,tablelist,toPage) { $("#table_paginate select[name=pageNumber],input[name=pageNumber] ").val(toPage); ajaxLoad(url,$.param({'pageNumber': toPage}) + '&' +$("#"+searchForm+"").serialize(),'lu_user_list'); }
function ajaxLoad(url,data,loadTable){ $.ajax({ type:"post", url:url, data: data, contentType:"application/x-www-form-urlencoded; charset=UTF-8", dataType: "html", async:false,//同步 success:function (result) { $("#"+loadTable+"").html(result); } }) }