Springboot中集成分页工具pagehelper过程，以及前端页面

• 1.集成pagehelper，首先pom增加插件

 <!-- 分页插件 -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>4.1.6</version>
        </dependency>

• 2.在启动类中添加

 //配置mybatis的分页插件pageHelper
    @Bean
    public PageHelper pageHelper(){
        PageHelper pageHelper = new PageHelper();
        Properties properties = new Properties();
        properties.setProperty("offsetAsPageNum","true");
        properties.setProperty("rowBoundsWithCount","true");
        properties.setProperty("reasonable","true");
        //配置mysql数据库的方言
        properties.setProperty("dialect","mysql");
        pageHelper.setProperties(properties);
        return pageHelper;
    }

• 3.开始使用

其实这个时候就可以直接使用了，这里我自己的理解是，现在可以使用
PageHelper,PageInfo集成好了的这些工具类了，这里我我写的代码为例
我的Service层，没有通过接口，直接实现的

  public PageInfo<Honor> selectYearHonor(int page,int pageSize)throws Exception{
        //设置分页信息，分别是当前页数和每页显示的总记录数
        // 【记住：必须在mapper接口中的方法执行之前设置该分页信息】
        PageHelper.startPage(page, pageSize);
        List<Honor> list = this.honorMapper.selectYearHonor();       //全部荣誉
        //返回的是一个PageInfo,包含了分页的所有信息
        PageInfo<Honor> pageInfo = new PageInfo<>(list);
        return pageInfo;
    }

我的Controller层，这里我是调用ajax返回的方法，如果是直接跳转页面的话那就是把这些参数带过去就好了

   /**
           * 荣誉分页功能(集成mybatis的分页插件pageHelper实现)
           *
           * @param page    :当前页数
           * @param pageSize  :每页显示的总记录数
           * @return
          */
    @ResponseBody
    @RequestMapping("/selectYearHonor.do")
    public PageInfo<Honor> selectYearHonor(@RequestParam(required=true,defaultValue="1") int page,
                                           @RequestParam(required=true,defaultValue="10")  int pageSize)
            throws Exception{
        return this.honorService.selectYearHonor(page, pageSize);
    }

我的页面，因为我是通过ajax的，所以页面上的值也是通过ajax返回去写入，我们在前端页面增加一个控件，等会往这里写入上一页下一页

   <!--分页开始-->
        <div>
            <div id="pagination" style="margin-left: 100px;text-align: left;display:inline"></div>
        </div>
        <!--分页结束-->

我的ajax，看一下我的js,这个地方要注意一点就是在每次继续请求地址的时候需要将你的page带过去，否则就会一直是默认的第一页

 var list=null;
    var totalSize=null;
    $.ajax({
        type : 'POST',
        url : 'honor/selectYearHonor.do?page='+page,
        dataType : 'json',
        async : false,
        success : function(data) {
            console.log( data);

            list = data.list;
            totalSize = list.length;

            if(page>data.pages){
                page=data.pages
            }

            if(data !=null){
                $("#pagination").append("<p style='color: yellow;font-size: 15px;font-weight: bold;float: right'>一共" + data.pages + "页,当前第"+page+"页</p>\n" +
                    "        <a style='width: 100px' href=\"data.do?type="+time+"&page=" + data.firstPage + "\">首页</a>\n" +
                    "        <a style='width: 100px' href=\"data.do?type="+time+"&page=" + data.prePage + "\">上一页</a>\n" +
                    "        <a style='width: 100px' href=\"data.do?type="+time+"&page=" + data.nextPage + "\">下一页</a>\n" +
                    "        <a style='width: 100px' href=\"data.do?type="+time+"&page=" + data.lastPage + "\">末页</a>"+
                " <div style=\"text-align: right;display:inline\">\n" +
                    "            <input type='text' id='pageNum' placeholder=\"页数\"\n" +
                    "                   style=\"border: none;margin-left: 300px;\n" +
                    "                   border-radius:9px;width: 100px;\n" +
                    "                    text-align: center\"/>\n" +
                    "            <button style=\"border: none;background: none;color: white\" onclick='search("+time+")'>查找</button>\n" +
                    "            </div>");
            }

        }
        });


    $(".table").append("<thead>\n" +
        "                <tr>\n" +
        "                    <th>所在部门</th>\n" +
        "                    <th>奖项名称</th>\n" +
        "                    <th>获奖人</th>\n" +
        "                    <th>授奖单位</th>\n" +
        "                    <th>获奖主体</th>\n" +
        "                    <th>获奖等级</th>\n" +
        "                    <th>班级或团体成员</th>\n" +
        "                    <th>等次</th>\n" +
        "                </tr>\n" +
        "                </thead>");


    for(var i=0;i<totalSize;i++){
        $(".table").append("<tbody>\n" +
            "            <tr>\n" +
            "            <td>"+list[i].organ+"</td>\n" +
            "            <td>"+list[i].prizename+"</td>\n" +
            "            <td>"+list[i].prizewinner+"</td>\n" +
            "            <td>"+list[i].prizeorgan+"</td>\n" +
            "            <td>"+list[i].type+"</td>\n" +
            "            <td>"+list[i].level+"</td>\n" +
            "            <td>"+list[i].member+"</td>\n" +
            "            <td>"+list[i].grade+"</td>\n" +
            "            </tr>\n" +
            "            </tbody>");
    }

这里data.list可能会有人不理解，这是我们返回的对象，PageInfo中的数据，这是一个集成好的类，也会有人单独写一个类，这个类中早就集成好了很多的参数，例如，总页数，每页大小，是不是最后一页，是不是第一页等等，可以使用工具进去这个类查看一下源码

4，我的效果

这里的样式你就可以自己来调整了