[分页查询]SpringBoot整合PageHelper分页插件实现简单的分页查询(含前端及后端代码)

最新推荐文章于 2024-05-14 11:14:39 发布

朱同学

最新推荐文章于 2024-05-14 11:14:39 发布

阅读量6.1k

点赞数 5

分类专栏： spring 文章标签：分页查询前端后端 springboot pageHelper

本文链接：https://blog.csdn.net/a755199443/article/details/94554320

版权

spring 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

SpringBoot整合PageHelper分页插件实现简单的分页查询(含前端及后端)

使用技术

整体思路

后端部分

前端部分

结果展示

使用技术

IDE:idea
框架:springboot/mybatis
分页插件:PageHelper
视图层:JSP/jstl
架构:MVC

整体思路

1 前端页面发送请求,携带请求参数:跳转页码和每页显示的条目数
2 Controller接收请求调用service层
3 service层调用Mapper层查询获得集合列表,将集合列表封装在PageResult对象中
4 Controller层将PageResult对象存放在Model中返回给相应的页面
5 页面取出PageResult对象中的数据展示在页面上

后端部分

首先创建一个springboot项目,添加分页插件依赖:

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

在application.properties中配置分页插件(这部分配置可以省略):

#pagehelper分页插件配置
pagehelper.helperDialect=mysql
pagehelper.reasonable=true
pagehelper.supportMethodsArguments=true
pagehelper.params=count=countSql

创建PageResult的javaBean封装分页查询结果:

public class PageResult<T> implements Serializable{
	

	private List<T> rows;	//每页的数据
	private Long total;		//总共有多少记录数
	private Integer currentPage;	//当前页数(从1开始)
	private Integer pages;		//总共页数

	public Integer getPages() {
		return pages;
	}

	public void setPages(Integer pages) {
		this.pages = pages;
	}

	public Integer getCurrentPage() {
		return currentPage;
	}

	public void setCurrentPage(Integer currentPage) {
		this.currentPage = currentPage;
	}

	public List<T> getRows() {
		return rows;
	}
	public void setRows(List<T> rows) {
		this.rows = rows;
	}
	public Long getTotal() {
		return total;
	}
	public void setTotal(Long total) {
		this.total = total;
	}
	
	
}

查询集合的mapper层:

@Mapper
public interface CustomerMapper {
    @Select("select * from customer")
    List<Customer> selAllCusomer();
}

业务层,实现分页查询和对查询结果做封装

@Service
public class CustomerServiceImpl implements CustomerService {

    @SuppressWarnings("SpringJavaInjectionPointsAutowiringInspection")
    @Autowired
    CustomerMapper customerMapper;

    //执行分页查询
    @Override
    public PageResult<Customer> selAllCustomer(Integer page, Integer rows) {
        Page ps = PageHelper.startPage(page, rows);

        List<Customer> list = customerMapper.selAllCusomer();
        System.out.println(list);
        PageResult<Customer> result = new PageResult<Customer>();
        result.setRows(list);
        result.setTotal(ps.getTotal());
        result.setPages(ps.getPages());
        result.setCurrentPage(page);
        return result;
    }
}

连接业务层和视图层的Controller

@Controller
public class CustomerController {
    @Autowired
    CustomerService customerService;

    @RequestMapping("/showAllCustomer")
    public String itemList(@RequestParam(defaultValue="1")Integer page,
                                         @RequestParam(defaultValue="10")Integer rows, Model model){
        System.out.println("CustomerController.itemList");
        PageResult<Customer> pageResult = customerService.selAllCustomer(page, rows);
        model.addAttribute("page", pageResult);
        return "CSInf";
    }
}

前端部分

页面主要分为两个部分

1 将分页查询的每页内容展示出来
2 在最下方增加分页查询的页码

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!--文件头开始-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Language" content="zh-cn">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="description" content="顾客信息表">
    <title>所有顾客信息表</title>
    <LINK href="../../css/main.css" rel=stylesheet>
    <link rel="stylesheet" type="text/css" href="../../css/test3.css">
    <script language="JavaScript" src="../../js/main.js"></script>
    <script src="../../js/jquery-1.12.3.min.js"></script>

</head>
<body onLoad="MM_preloadImages('images/index_on.gif','images/reg_on.gif','images/order_on.gif','../images/top/topxmas/jp_on.gif','../images/top/topxmas/download_on.gif','../images/top/topxmas/bbs_on.gif','../images/top/topxmas/designwz_on.gif')"
      topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<div class="">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <table width="100" border="0" cellspacing="0" cellpadding="0" align="center">
            </table>
            </td>
        </tr>
    </table>
    <table cellspacing="1" cellpadding="3" align="center" border="0" width="98%">
    </table>
    <!--文件体开始-->
    <br>
    <br>
    <table cellspacing=1 cellpadding=3 align=center class=tableBorder2>
        <tr>
            <td height=25 valign=middle bgcolor="#E4F3FF" align="center">
                <a href="AFirstLog">返回首页</a>
            </td>
            <td height=25 valign=middle bgcolor="#E4F3FF" align="center">
                <b>顾客信息如下！</b>
            </td>
        </tr>
    </table>
    <br>
    <form method="post" name="reg" action="OutStock.jsp">
        <table cellpadding="3" cellspacing="1" align="center" class="tableborder3" id="table1">
            <tr>
                <td valign="middle" colspan="2" align="center" height="25" color="#9999FF">
                    <font><b></b></font></td>
            </tr>
            <tr>
                <td width="10%" class="tablebody1" align="center"><b>客户编号</b>
                </td>
                <td width="10%" class="tablebody1" align="center"><b>用户名</b><br>
                </td>
                <td width="10%" class="tablebody1" align="center"><b>密码</b>
                </td>
                <td width="10%" class="tablebody1" align="center"><b>姓名 </b>
                </td>
                <td width="10%" class="tablebody1" align="center"><b>性别 </b>
                </td>
                <td width="10%" class="tablebody1" align="center"><b>年龄</b>
                </td>
                <td width="10%" class="tablebody1" align="center"><b>联系方式</b>
                </td>
                <td width="10%" class="tablebody1" align="center"><b>Email地址</b>
                </td>
                <td width="10%" class="tablebody1" align="center"><b>联系地址</b>
                </td>
                <td width="10%" class="tablebody1" align="center"><b>信息修改</b>
                </td>
            </tr>

            <c:forEach items="${page.rows}" var="customer" begin="0" varStatus="stusts">
                <tr>
                    <td width="10%" class="tablebody1" align="center">${customer.id}
                    </td>
                    <td width="10%" class="tablebody1" align="center">${customer.account}
                    </td>
                    <td width="10%" class="tablebody1" align="center">${customer.password}
                    </td>
                    <td width="10%" class="tablebody1" align="center">${customer.name}
                    </td>
                    <td width="10%" class="tablebody1" align="center">${customer.sex}
                    </td>
                    <td width="10%" class="tablebody1" align="center">${customer.age}
                    </td>
                    <td width="10%" class="tablebody1" align="center">${customer.phone}
                    </td>
                    <td width="10%" class="tablebody1" align="center">${customer.email}
                    </td>
                    <td width="10%" class="tablebody1" align="center">${customer.address}
                    </td>
                    <td width="15%" class="tablebody1" align="center">
                        <a href="ACInf?account=${customer.account}">修改</a>
                    </td>
                </tr>
            </c:forEach>
        </table>

    </form>

    <div style="text-align: center;font-size: 15px;" id="p">
        <a href="/showAllCustomer?page=1">首页</a>
        <c:choose>
            <c:when test="${page.currentPage > 1 }">
                <a href="/showAllCustomer?page=${page.currentPage-1 }">上一页</a>
            </c:when>
            <c:otherwise>
                <a href="#">上一页</a>
            </c:otherwise>
        </c:choose>
        <c:forEach var="p" begin="1" end="${page.pages }">
            <c:choose>
                <c:when test="${page.currentPage==p}">
                    <a href="/showAllCustomer?page=${p}" style="text-decoration: underline">${p}</a>
                </c:when>
                <c:otherwise>
                    <a href="/showAllCustomer?page=${p}">${p}</a>
                </c:otherwise>
            </c:choose>
        </c:forEach>
        <c:choose>
            <c:when test="${page.currentPage < page.total }">
                <a href="/showAllCustomer?page=${page.currentPage+1 }">下一页</a>
            </c:when>
            <c:otherwise>
                <a href="#">下一页</a>
            </c:otherwise>
        </c:choose>
        <a href="/showAllCustomer?page=${page.pages}">末页</a>
    </div>

</body>
</html>

结果展示

在这里插入图片描述

朱同学

关注

5
点赞
踩
56

收藏

觉得还不错? 一键收藏
2
评论
[分页查询]SpringBoot整合PageHelper分页插件实现简单的分页查询(含前端及后端代码)

SpringBoot整合PageHelper分页插件实现简单的分页查询(含前端及后端) 使用技术整体思路后端部分前端部分结果展示使用技术IDE:idea框架:springboot/mybatis分页插件:PageHelper视图层:JSP/jstl架构:MVC整体思路1 前端页面发送请求,携带请求参数:当前页码和每页显示的条目数2 Controller接收...
复制链接

扫一扫

专栏目录