一、后台代碼：
1.1 controller層代碼
@RequestMapping("/xxxxxx")
public String showInformationCode(String pageNum ,Model model,HttpServletRequest request){
String id = (String)request.getSession().getAttribute("Id");
if(pageNum == null){
pageNum="1";
}
int parseInt = Integer.parseInt(pageNum);
if (StringUtils.isBlank(id)) {
return null;
}
Page<Test> selectTestListById = informationService.selectTestListById(id ,parseInt);//jpa的分頁查詢,parseInt（第幾頁）
model.addAttribute("selectTestListById ",selectTestListById );
return "test";
}
1.2 service層代碼
public static final int PAGE_SIZE = 10; //全局變量PAGE_SIZE（每頁顯示的數據條數） /** * 分頁查詢 * @param csdbId * @param pageable * @return */ public Page<Test> selectTestListByCsdbId(String id ,int pageNumber) { PageRequest buildPageRequest = BuildPageRequest(pageNumber, PAGE_SIZE); Page<Test> findById = testMapper.findById(id, buildPageRequest); return findById ; } public static PageRequest buildPageRequest(int pageNumber, int pagzSize){ return new PageRequest(pageNumber - 1, pagzSize, null); }
1.3 mapper層代碼
public interface CsdbSetDmInformationCodeMapper extends JpaRepository<CsdbSetDmInformationCode, String>{ /** * 分頁 */ Page<Test> findById(String id ,Pageable pageable); //批量刪除 @Transactional @Modifying @Query(value="delete from tablre where id in ?1 ",nativeQuery=true) int deleteByPrimaryKeys(List<String> ids); }
這樣傳入前台的數據就只有10條，直到下一次請求的到來，在根據傳入的pageNum(頁數)來確定傳入前台的數據（eg:每頁的條數我是通過全局變量寫死了的，可以自行修改）
二、前台使用layui的layPage插件來實現分頁
2.1 首先要在頁面上引入layui的js和css（也可直接引用layPage.js），layui的下載地址:http://res.layui.com/download/layui/layui-v2.0.2.zip
2.2 前台test.html頁面
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd"> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>information code</title> <link rel="stylesheet" th:href="@{/libs/plugin/layui/css/layui.css}"> <link rel="stylesheet" th:href="@{/css/test.css}"> </head> <body> <div id="warpper"> <div id="informationCode"> <table class="bordered"> <thead> <tr> <th> <input type="checkbox" class="check-all"> </th> <th>Information Code</th> <th>InfoName</th> <th>Front Matter Routine</th> </tr> </thead> <tbody> <tr th:each = "informationCode : ${selectTestListById.content}" th:id="${informationCode.id}"> <td><input type="checkbox" th:value="${informationCode.id}" name="idCheckbox"></td> <td class="informationcode"><input type="text" class="input-style" th:value="${informationCode.informationcode}" readonly="readonly"/></td> <td class="infoname"><input type="text" class="input-style" th:value="${informationCode.infoname}"/></td> </tr> </tbody> </table> <div id="pages"> </div> <input type="hidden" th:value="${informationCodeList.TotalPages}" id="pageTotal"> <!-- 總條數 --> <input type="hidden" th:value="${informationCodeList.number+1}" id="page"> <!-- 第幾頁 --> </div> <div id="btnBox"> <input type="button" value="New" class="btn-style fl" id="informationCodeAdd"> <input type="button" value="Delete" class="btn-style fl" id="informationCodeDel"> <a class="btn-href" href="/csdb/info/informationCodeDefault.shtml"> <input type="button" value="Default" class="btn-style fl" id="informationCodeDefault"/></a> <input type="button" value="Save" class="btn-style fl" id="informationCodeSave"> </div> </div> </body> <script th:src="@{/csdb/libs/jquery/jquery-3.2.1.js}" type="text/javascript"></script> <script th:src="@{/csdb/libs/plugin/layui/layui.js}" type="text/javascript"></script> <script> <!-- /** * 分頁（layui的版本為1.0.9時使用） */ layui.use('laypage', function(){ var laypage = layui.laypage; //執行一個laypage實例 laypage({ cont: 'pages', pages: $("#pageTotal").val(), skip: true, //控制分頁皮膚 curr:$("#page").val(), jump:function (obj,first){ if(!first){ window.location.href="/csdb/info/informationCode.shtml?pageNum="+obj.curr } } }); }); --> /** * 分頁（layui的版本為2.x時使用） */ layui.use('laypage', function(){ var laypage = layui.laypage; //執行一個laypage實例 laypage({ elem: 'pages', //不同於1.0.9版本 count: $("#pageTotal").val(), //切換分頁的回調,當分頁被切換時觸發，函數返回兩個參數：obj（當前分 //頁的所有選項值）、first（是否首次，一般用於初始加載的判斷） jump:function (obj,first){ if(!first){ window.location.href="/xxxxxx?pageNum="+obj.curr } } }); }); </script> </html>