一、引入依赖

        <!-- https://mvnrepository.com/artifact/io.springfox/springfox-swagger-ui -->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>2.9.2</version>
        </dependency>
<!--分页-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>5.1.2</version>
        </dependency>

        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.3</version>
        </dependency>

二、yaml

pagehelper:
  reasonable: true
  support-methods-arguments: true
  params: count=countSql
  helperDialect: mysql

三、controller

  @ApiOperation("文章分页")
    @ResponseBody
    @PostMapping("/pageArticle")
    public Object pageArticle(@RequestBody String message) {
        JSONObject jsonObject = JSONObject.parseObject(message);
        //        取出参数
        //      起始页
        int page = jsonObject.getInteger("page");
        //每页显示的条数
        int limit = jsonObject.getInteger("limit");
        PageHelper.startPage(page, limit);
        /*只有紧跟在PageHelper.startPage方法后的第一个Mybatis的查询（Select）方法会被分页。
         * 先PageHelper.startPage(1, 10)开始分页，再selectlist查询数据库的时候会自动加上limit 1，10，
         * 最后封装成PageInfo的时候会自动带上页码、页大小、总数等。*/
        //查出数据
        List<Article> articles = articleMapper.dateArticle();
      /*  //使用PageInfo包装查询后的结果，只需要将PageInfo交给页面就行。
        //封装了详细的分页信息，包括我们查询出来的数据userList，传入连续显示的页数5*/
        PageInfo articlePageInfo = new PageInfo(articles);
        Map<String, Object> map = new HashMap<>();

        /*      //查询出的数据
         * code，msg必须有*/
        map.put("data", articlePageInfo.getList());
        map.put("code", 0);
        map.put("msg", "请求成功");
        //数据总条数
        map.put("count", articlePageInfo.getTotal());
        System.err.println(map);
        return map;
    }

四、js

function page(pageNum, pageSize) {
    let pagee = {
        "page": pageNum,
        "limit": pageSize
    }
    // alert(JSON.stringify(pagee))
    $.ajax({
        url: "/ran/pageArticle",
        dataType: "json",
        type: "post",
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify(pagee),
        success: function (data) {

            console.log(data.count)

            let newsNum = data.data.length;
            console.log(data.count)

            layui.use(['laypage', 'layer'], function () {
                var laypage = layui.laypage
                //自定义样式
                laypage.render({
                    elem: 'demo2-1',
                    count: data.count,//文章总数
                    theme: '#FF5722',
                    curr: pageNum,//起始页。一般用于刷新类型的跳页以及HASH跳页
                    limit: pageSize,//每页显示的条数。
        
                    page: true,
                    jump: function (obj, first) { //obj为当前页的属性和方法，第一次加载first为true
                        console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                        console.log(obj.limit); //得到每页显示的条数

                        if (!first) {
                            //调用加载函数加载数据
                            page(obj.curr, obj.limit);
                        }
                    }
                });
                $("#LAY_bloglist").children().remove();
                for (let i = 0; i < newsNum; i++) {
                    setContent(data.data[i]);
                }
            });
        }

    })
}

成品

• 引入layui.js可以去官网看看