Spring Data JPA + layui的前台分页插件layPage实现页面的分页

一、后台代码：

　　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>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/Amaris-Lin/p/7453743.html