springboot+mybatisplus+thymeleaf整合分页(带前端和后端代码)

作者: adm 分类: java,mybatis 发布时间: 2021-05-18 16:31

最近一直在使用mybatis-plus开发,发现方便的地方挺多的,包括自带的分页插件,而且整合了springboot之后,很多基本的sql都不需要再编写了,但使用thymeleaf实现前端分页的资料非常少,自己总结了一些,供参考

准备
使用sts4(eclipse开发springboot工具)创建一个springboot项目:

pom.xml文件 ,

<dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.0.7.1</version>
        </dependency>

Mapper

public interface OrderExpressMapper extends BaseMapper<OrderExpressEntity> {
    Page<OrderExpressEntity> findAllAndPage(Page<OrderExpressEntity> page, @Param("ew") QueryWrapper<OrderExpressEntity> queryWrapper);
}

//xml

<select id="findAllAndPage" resultType="com.qy.site.modules.base.entity.OrderExpressEntity">

  SELECT e.*,o.orderNo FROM yz_order_express e JOIN yz_orders o ON e.orderId=o.orderId
    ${ew.customSqlSegment}
</select>

Controller层

@GetMapping("expressList")
public String expressList(ModelMap model, HttpServletRequest request,@RequestParam(required = false, defaultValue = "1", value = "p") Integer p){
    Page<OrderExpressEntity> pageArt=new Page<OrderExpressEntity>(p,10);
    QueryWrapper<OrderExpressEntity> wrapper=new QueryWrapper();
    String keywords=request.getParameter("keywords");
    if(keywords!=null){
        wrapper.like("orderNo",keywords);
    }
    Page<OrderExpressEntity> pager = orderExpressMapper.findAllAndPage(pageArt,wrapper); //自定义方法,多表
    System.out.println(pager);
    List<OrderExpressEntity> expressList=pager.getRecords();

    PageUtil pageUtil=new PageUtil(pager);
    request.setAttribute("page",pager);
    request.setAttribute("beginPage",pageUtil.getBeginPage());
    request.setAttribute("endPage",pageUtil.getEndPage());
    request.setAttribute("expressList",expressList);
    request.setAttribute("jumpUrl", "/admin/express/expressList?p=");
    return "admin/order/index";
}

//分页类

public class PageUtil {
    private long currentPage;
    private long lastPage;
    private long total;
    private long beginPage;
    private long endPage;

    public  PageUtil(Page page){
        this.currentPage=page.getCurrent();
        this.lastPage=page.getPages();
        this.total=page.getTotal();
        this.initPage();
    }

    public long getBeginPage(){
        return this.beginPage;
    }
    public long getEndPage(){
        return this.endPage;
    }
    public void initPage(){
        long side   = 2;
        long offset=5; //中间页码表总长度,为奇数

        this.beginPage =this.currentPage-side;
        if(this.beginPage<1){
            this.beginPage=1;
        }
        this.endPage=this.beginPage+offset-1; //左边加显示页数减1就是右边显示数
        if(this.endPage>this.lastPage){
            this.endPage=this.lastPage;
        }
        if((this.endPage-offset+1)>1){
            this.beginPage=this.endPage-offset+1;
        }

    }
}

前面的后台分页处理,可以在很多其他博客中找到,后面的页面是重点了
单独的分页html页面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<meta charset="UTF-8">
<div th:fragment="page"><!--定义用于被显示列表页包含-->
    <head>
        <style>

            #page-left{
                float: left
            }
            #page-left span{
                display: inline-block;
            }
            #page-right{
                float: right;
            }

        </style>
    </head>
    <div id="page">
    <div id="page-left" th:if="${page.pages>0}">
        当前第<span th:text="${page.current}"></span>页,共<span
            th:text="${page.pages}"></span>页,总记录数<span th:text="${page.total}"></span>
    </div>
    <div id="page-right" th:if="${page.pages>1}">
        <a th:href="@{${jumpUrl}}" th:text="首页" th:if="${page.current>1}" th:class="page-item"></a>
        <a th:href="@{${jumpUrl}+${page.current-1}}" th:text="上一页" th:class="page-item"
           th:if="${page.current>1}"></a>

        <a th:href="@{${jumpUrl}+%20${i}}"
           th:each="i :${#numbers.sequence(beginPage, endPage)}" th:text="${i}"
           th:class="${page.current == i}? 'page-item cur' :'page-item' "></a>
        <a th:href="@{${jumpUrl}+${page.current+1}}" th:text="下一页" th:class="page-item"
           th:if="${page.current<page.pages}"></a> <a
            th:href="@{${jumpUrl}+${page.pages}}" th:text="尾页" th:class="page-item"
            th:if="${page.current<page.pages}"></a>
    </div>
</div>
</div>
</html>
列表页面
 <table id="sample-table-1" class="table table-striped table-bordered table-hover"> 
    <thead> 
       <tr> 
        <th class="center"><label> <input type="checkbox" id="checkAll"/></label></th> 
        <th>序号</th> <th>类别名称</th> <th>操作指令</th> 
      </tr> 
    </thead> 
  <tbody> 
    <tr th:each="category,states : ${page.records}"> 
      <td class="center"><input type="checkbox" name="ids" th:value="${category.cid}"></td> 
      <td th:text="${states.count}"></td> <td th:text="${category.cname}"></td> 
      <td> <a th:text="删除" href="javascript:;" th:onclick="doDel([[${category.cid}]])"></a> <a th:href="@{'/back/goodscategory/update/'+${category.cid}}" th:text="修改"></a></td> 
    </tr> 
  </tbody> 
</table> 
<div th:replace="back/page :: page"></div><!--将分页的页面包含-->

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!