Springboot之Pagehelper分页

Maven:

<!-- https://mvnrepository.com/artifact/com.github.pagehelper/pagehelper-spring-boot-starter -->
<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper-spring-boot-starter</artifactId>
    <version>1.2.5</version>
</dependency>

application.properties:

#识别数据库
pagehelper.helper-dialect=mysql
#第一页和末尾页
pagehelper.reasonable=true

Controller层：

public  PageInfo<Emp> queryAllEmp(int pageNum){
    //offset:数据起始行       limit:显示数据条数
    PageHelper.offsetPage((pageNum-1)*2,2);    
    //数据集合
    List<Emp> emps = empMapper.queryAllEmp();
    //初始化
    PageInfo<Emp> empPageInfo = new PageInfo<>(emps);
    //返回
    return empPageInfo;
}

前端：

<script src="js/jquery-1.12.4.min.js"></script>
    <body>
        <table id="tab" border="2">
            <tr>
                <th>员工编号</th>
                <th>员工姓名</th>
                <th>员工性别</th>
                <th>员工年龄</th>
                <th>员工生日</th>
            </tr>
        </table>
        <div id="div1"></div>
        <div name="pageNum" id="pageNum"></div>
    </body>
    <script>
        function list(pageNum) {
            $.post("http://localhost:8081/boot/queryAllEmp", {"pageNum": pageNum}, function(data) {
                $("#div1").text("")//页数刷新
                $(".tr").remove()//新数据刷新
                $.each(data.list, function(emp) {
                    var tr = $("<tr class='tr'></tr>");
                    var td1 = $("<td>" + this.id + "</td>");
                    var td2 = $("<td>" + this.name + "</td>");
                    var td3 = $("<td>" + this.sex + "</td>");
                    var td4 = $("<td>" + this.age + "</td>");
                    var td5 = $("<td>" + this.birthday + "</td>");
                    $(tr).append(td1);
                    $(tr).append(td2);
                    $(tr).append(td3);
                    $(tr).append(td4);
                    $(tr).append(td5);
                    $("#tab").append(tr)
                });
                $("#div1").append("<a onclick='toUp(" + data.prePage + ")'>上一页</a>")
                $("#div1").append("<a onclick='toDown(" + data.nextPage + ")'>下一页</a>")
                $("#pageNum").text("当前第" + data.pageNum + "页")
            })
        }

        list(1);

        function toUp(pageNum) {
            list(pageNum);
        }

        function toDown(pageNum) {
            list(pageNum);
        }
    </script>

Springboot之Pagehelper分页

猜你喜欢