springboot+Thymeleaf+layui 實現分頁

layui分頁插件

引入相關的js和css

layui：css <link rel="stylesheet" th:href="@{layui/css/layui.css}">

layui：js <script th:src="@{layui/layui.js}"></script>

jquery   <script th:src="@{js/jquery.min.js}"></script>

th:src="@{xxx}" 這個對應的文件路徑 當然采用cdn 直接導入鏈接也可以直接按照html格式去寫

CDN 方式

<!-- 引入 layui.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.5/css/layui.min.css">
<!-- 引入 layui.js -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.5/layui.min.js">

<!-- 引入 jquery.js -->

<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

引入分頁插件

    <script th:inline="JavaScript">
        layui.use('laypage', function () {
            var laypage = layui.laypage;
            laypage.render({
                elem: 'userpage', //任意一個div 的ID，但不用加 # 號 將分頁添加到該div下面
                count: [[${session.gzcount}]], //數據總數，后台獲取
                limit: 5, //每頁條數
                curr: [[${session.pages}]],  //當前頁數
                layout: ['prev', 'page', 'next', 'skip'], //這里就是一些功能按鈕 詳情可以閱讀 layui的官方文檔
                jump: function (obj, first) {
                    //這里是首次不執行，以為當我們異步請求后 需要重新加載該頁面獲取新的數據 如果直接寫在外面 會循環調用 導致頁面一直重復加載
                    if (!first) {
                        $.ajax({
                            type: "POST",
                            url: "/user/gzpages", //接口路徑
                            data: {"pages":obj.curr,      //obj.curr得到當前頁，以便向服務端請求對應頁的數據。
                                "limit":obj.limit,//obj.limit得到每頁顯示的條數
                            },
                            success: function(data) {
                                location.reload() //重新加載頁面 當然這里可以進行判斷 如果后台數據沒有改動 可以不用重新加載
                            },
                        });
                    }
                }
            });
        });
    </script>

Controller

直接上代碼了，

 @RequestMapping("/user/gomygz")
    public String mygz(HttpServletRequest request,Model model){
        String gzpages =(String) request.getSession().getAttribute("gzpages");
        Map finduserfansmap = userService.finduserfansmap(request, gzpages);
        /**這個是一個封裝參數的方法可以封裝到service中 也可以直接放在controller 當然最好封裝到Service中
           public Map finduserfansmap(HttpServletRequest request, String pages){    
             String limit =(String) request.getSession().getAttribute("limit");
             String pages=(String) request.getSession().getAttribute("pages");
             Map map=new HashMap();      
             int pages1=1,limit1=5;  //初始化參數 （當前頁 和每頁條數）  
             if (pages!=null&&limit!=null){  //第一次進入頁面 session pages limit 是空的 我們就直接用最初的值 當異步請求創建了session 后我們就用 session的值
               pages1 = Integer.valueOf(pages);
               limit1 = Integer.valueOf(limit);
             }
            map.put("start",pages1*limit1-limit1);
            map.put("end",pages1*limit1);
            return map;
           }
        **/
        List<Fansmsg> relations = userService.findto_userid(finduserfansmap);
        request.getSession().setAttribute("mygz",relations);
        return "user/mygz";
    }
     //切換頁碼的請求
    @RequestMapping("/user/gzpages")
    @ResponseBody
    public int gzpages(String pages,String limit,HttpServletRequest request){
      //將參數封裝到session里面 每次請求都會更新session的值
        request.getSession().setAttribute("pages",pages);
        request.getSession().setAttribute("limit",limit);
        return 1;
    }

Mapper 

就是一個簡單的SQL語句

   <select id="xxx" parameterType="map" resultType="pojo">
        select * from table where 查詢條件  limit #{start},#{end}
    </select>

這樣就可以實現了

當然用vue 可以雙向綁定 前后端分離 后端只負責提供各種json數據 前端用vue 遍歷數據 就比這簡單多了