java实现分页和后端交互

「本文已参与「新人创作礼」活动，一起开启掘金创作之路。」

控制层

首先是pagehelper的分页引用

//偏移量 每页展示条数
PageHelper.offsetPage(WebRequest.getOffset(), WebRequest.getLimit());

接下来是查询

List<UserBetCountDTO> list = userBetCountService.findByUserList(userBetCountDTO);
PageInfo pageInfo = new PageInfo(list);

返回到页面

//这里是第几页
model.addAttribute("pageNum", WebRequest.getPageNum());
//这个是用来点击的上一页 下一页的链接路由
model.addAttribute("pageUrl", "/childrenFlow");
//这里是搜索中携带的参数 点击分页的时候都要参与进来
model.addAttribute("params", "startTime=" + (StringUtils.isEmpty(startTime) ? StringUtils.EMPTY : startTime) +
        "&endTime=" + (StringUtils.isEmpty(endTime) ? StringUtils.EMPTY : endTime) +
        "&userAccount=" + (StringUtils.isEmpty(userAccount) ? StringUtils.EMPTY : userAccount));
//是否还有数据 如果还有数据 那么允许点击下一页 没有数据 那就禁用
model.addAttribute("end", pageInfo.getTotal() - WebRequest.getPageNum() * WebRequest.getLimit() > 0 ? false : true);

html

<#if pageNum gt 1 || end == false>
    <div class="pageContainer">
        <#if pageNum == 1>
            <a href="javascript:void(0);" class="pageBtn pageMargin pageBtnNone">上一頁</a>
        <#else >
            <a href="${pageUrl}?pageNum=${pageNum-1}&${params!}" class="pageBtn pageMargin" >上一頁</a>
        </#if>
        <#if end == true>
            <a href="javascript:void(0);" class="pageBtn  pageBtnNone">下一頁</a>
        <#else>
            <a href="${pageUrl}?pageNum=${pageNum+1}&${params!}" class="pageBtn">下一頁</a>
        </#if>
    </div>
</#if>

css

.pageContainer {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 0.24rem;
}

.pageMargin{
    margin-right: 0.32rem;
}

.pageBtn {
    width: 0.68rem;
    height: 0.32rem;
    text-align: center;
    line-height: 0.32rem;
    background: #386AF6;
    font-size: 0.14rem;
    border-radius: 0.04rem;
    color: #FFFFFF;
}

.pageBtnNone {
    opacity: 0.49;
    text-decoration: none;

}

最终效果