bootstrap+pageHelper+spring boot 实现分页

后台通过mybatis插件pageHelper实现分页查询

先上效果图

maven地址

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

controller

@RequestMapping("/index")
    public String index(Model model,Integer pageNumber){
        if (pageNumber == null){
            pageNumber = 1;
        }
        PageHelper.startPage(pageNumber,3);
        List<ScoreReport> list = this.scoreReportService.getPageList();
        PageInfo<ScoreReport> pageInfo = new PageInfo<>(list);
        model.addAttribute("pageInfo",pageInfo);
        return "score";
    }

 PageHelper.startPage()方法下需要就应该是查询语句

大概意思就是我要开始查询了,准备分页吧

前台页面网上参考地址找不到了

上js代码

<div style="float: right;">
    <div style="float: right;">
        当前${pageInfo.pageNum}页,共${pageInfo.pages }页,总${pageInfo.total }条记录
    </div>
    <div>
        <ul class="pagination">
            <!--
                1.pageContext.request.contextPath表示当前项目路径,采用的是绝对路径表达方式。一般为http:localhost:8080/项目名 。
                2.首页,末页的逻辑:pn=1访问第一次,pn=${pageInfo.pages}访问最后一页
              -->
            <li>
                <a href="${pageContext.request.contextPath}/index?pageNumber=1">首页</a>
            </li>
            <!-- 如果还有前页就访问当前页码-1的页面, -->
            <c:if test="${pageInfo.hasPreviousPage}">
                <li>
                    <a href="${pageContext.request.contextPath}/index?pageNumber=${pageInfo.pageNum-1}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
            </c:if>
            <li>
                <!--遍历所有导航页码,如果遍历的页码页当前页码相等就高亮显示,如果相等就普通显示  -->
                <c:forEach items="${pageInfo.navigatepageNums }" var="page_Nums">
                <c:if test="${page_Nums==pageInfo.pageNum }">
            <li class="active"><a href="#">${page_Nums}</a></li>
            </c:if>
            <c:if test="${page_Nums!=pageInfo.pageNum }">
                <li ><a href="${pageContext.request.contextPath}/index?pageNumber=${page_Nums}">${page_Nums}</a></li>
            </c:if>
            </c:forEach>
            </li>
            <!-- 如果还有后页就访问当前页码+1的页面, -->
            <c:if test="${pageInfo.hasNextPage}">
                <li>
                    <a href="${pageContext.request.contextPath}/index?pageNumber=${pageInfo.pageNum+1}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </c:if>
            <li><a href="${pageContext.request.contextPath}/index?pageNumber=${pageInfo.pages}">末页</a></li>
        </ul>
    </div>
</div>
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值