springboot+mybatisplus+thymeleaf整合分页(带前端和后端代码)
最近一直在使用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><!--将分页的页面包含-->
