mybatis plus的分页插件在前台网站使用

1. 首先导入css和js

   1. <link href="/static/css/bootstrap.min.css" rel="stylesheet">
      
      <script src="/static/js/jquery-2.1.1.min.js"></script>
      
      <script src="/static/js/bootstrap.min.js"></script>
      
      <script src="/static/js/bootstrap-paginator.js"></script>

      ps：1.bootstrap-paginator.js下载的地址：https://github.com/lyonlai/bootstrap-paginator  在GitHub上进行下载。

   2. 中文乱码：<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

2. 页面添加显示用的div

   <div id="example" style="text-align: center"> <ul id="pageLimit"></ul> </div>
   

    

3. js代码

   $.ajax({
   
           url: "#springUrl('/sys/newsItem/getNewsItemList')",
   
           type: "POST",
   
           success: function (data) {
   
               var d = JSON.parse(data);
   
               formatNewItemList(d);                  //对这一页的数据的处理的js方法（自行编写）
   
                   var pageCount = d.total;           //总页数
   
                   var options = {
   
                       currentPage: 1,                       //当前页（初始化设置，所以是第一页）
   
                       totalPages: (pageCount%10) == 0?(pageCount/10):(pageCount/10)+1,        //总页数（10是定义的每页显示的数量）
   
                       numberOfPages:10,                                            //每页显示数量
   
                       bootstrapMajorVersion:3,                                   //最低bootstrap适配版本     
   
                       itemTexts: function (type, page, current) {
   
                           switch (type) {
   
                               case "first":
   
                                   return "首页";
   
                               case "prev":
   
                                   return "上一页";
   
                               case "next":
   
                                   return "下一页";
   
                               case "last":
   
                                   return "末页";
   
                               case "page":
   
                                   return page;
   
                           }
   
                       },onPageClicked: function(event, originalEvent, type, page){               //page代表你点的是第几页
   
                           /*
   
                           由于要给后台的mybatis plus的分页插件，他在调用getPage()的时候会从request中取“_index”和“_size”
   
                           查看mybatis的源码可以看到_index传入的时候，会变成offset偏移量，所以（_index=点击的页数 * 每页定义多少个 - 1）
   
                           _size就是你定义的每页显示多少个
   
                           */
   
                           var _index = parseInt(page)*10-1;               
   
                           $.ajax({
   
                               url: "#springUrl('/sys/newsItem/getNewsItemList')",
   
                               data:{"_index":_index,"_size":10},
   
                               type: "POST",
   
                               success: function (data) {
   
                                   var d = JSON.parse(data);
   
                                   console.log(d);
   
                                   formatNewItemList(d);    //对这一页的数据的处理的js方法（自行编写）
   
                               }
   
                           })
   
                       }
   
                   };
   
                   $('#page').bootstrapPaginator(options);
   
               }
   
       });
   
   });

4. controller

   @ResponseBody
   
   @Permission("1005")
   
   @RequestMapping("/getNewsItemList")
   
   public String getNewsItemList() {
   
       Page<NewsItem> page = getPage();
   
       return jsonPage(newsItemService.selectPage(page));
   
   }