一、后台代码：
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>