利用mybatis的分页插件实现分页

最新推荐文章于 2022-09-05 17:20:17 发布

阿里雄哥

最新推荐文章于 2022-09-05 17:20:17 发布

阅读量240

点赞数

文章标签： java

本文链接：https://blog.csdn.net/qq_45932382/article/details/118003838

版权

一、后端分页：

1、首先在pom文件中导入依赖：

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

2、在service的实现层利用插件pageHelper,它自动帮我们封装了pageInfo。


    @Override
    public PageInfo<User> queryUser(int pageNum, int pageSize) {
        PageHelper.startPage(pageNum,pageSize);
        List<User> list=userdao.queryUser();
        PageInfo<User> page=new PageInfo<>(list);
        return page;
    }

3、编写控制层

@RequestMapping("/AllUser")
public String AllUser(Model model, @RequestParam(defaultValue = "1") int pageNum, @RequestParam(defaultValue = "10") int pageSize){
        System.out.println(pageNum);
        System.out.println(pageSize);
       PageInfo<User> page=service.queryUser(pageNum,pageSize);
       model.addAttribute("page",page);
       return "User";
    }

二、前端分页：

1、前端页面中添加两个隐藏文本的表单：

<form action="/AllUser" id="fm" method="post">
    <input type="hidden" name="pageNum" id="pageNum" value="">
    <input type="hidden" name="pageSize" id="pageSize" value="">
</form>

2、导入bootstrap里面的分页组件：

<nav aria-label="Page navigation">
    <ul class="pagination">
        <li>
            <a id="first" aria-label="Previous">
                <span aria-hidden="true">首页</span>
            </a>
        </li>
        <li>
            <a id="pre" aria-label="Previous">
                <span aria-hidden="true">上一页</span>
            </a>
        </li>
        <c:forEach items="${page.navigatepageNums}" var="i">
            <li name="pageNum" <c:if test="${i==page.pageNum}">class="active" </c:if>><a>${i}</a></li>
        </c:forEach>

        <li>
            <a id="next" aria-label="Next">
                <span aria-hidden="true">下一页</span>
            </a>
        </li>
        <li>
            <a id="last" aria-label="Next">
                <span aria-hidden="true">末页</span>
            </a>
        </li>

        <li style="font-size: 20">
                &nbsp; &nbsp; &nbsp; &nbsp;共有 ${page.total} 记录
        </li>
    </ul>
</nav>

3、为分页组件添加点击事件：

<script>
    if (!${page.hasPreviousPage}){
        $("#pre").addClass("disabled");
        $("#first").addClass("disabled");
    }

    if (!${page.hasNextPage}){
        $("#next").addClass("disabled");
        $("#last").addClass("disabled");
    }

    $("#pre").click(function () {
        if (!$("#pre").hasClass("disabled")){
            $("#pageNum").val(${page.pageNum}-1);
            $("#fm").submit();
        }
    })

    $("#next").click(function () {
        if (!$("#next").hasClass("disabled")){
            $("#pageNum").val(${page.pageNum}+1);
            $("#fm").submit();
        }
    })

    $("li[name='pageNum']").click(function () {
        if(!$(this).hasClass("active")){
            $("#pageNum").val($(this).children("a").html());
            $("#fm").submit();
        }
    })

    $("#first").click(function () {
        if (!$("#first").hasClass("disabled")){
            $("#pageNum").val(1);
            $("#fm").submit();
        }
    })

    $("#last").click(function () {
        if (!$("#last").hasClass("disabled")){
            $("#pageNum").val(${page.pages});
            $("#fm").submit();
        }
    })
</script>

三、看看实现分页的效果吧