分页查询 - 分页查询表数据的实现

当我们数据表中的数据过多时, 为了不让这些数据在一个页面上全部显示出来, 我们可以采用分页的功能对一张数据表中的数据进行分页展示, 通过点击下一页或指定页进行查看相应的数据, 这样不仅提高了对数据的管理方式, 让页面展示效果不那么紧凑密集, 更重要的是提高了用户查阅的体验. 下面我们就对针对 分页查询 的功能实现步骤来一一讲解.

我们还是基于上一篇文章进行编写:https://blog.youkuaiyun.com/weixin_42629433/article/details/83338603

一. 导入依赖

在 pom.xml 中导入 PageHelper 的依赖 :

<!-- 分页查询 -->
<dependency>
     <groupId>com.github.pagehelper</groupId>
     <artifactId>pagehelper</artifactId>
     <version>5.1.2</version>
</dependency>

二. 配置插件

在 applicationContext.xml 中的 SqlSessionFactory 内传入如下配置 :

<!-- 传入PageHelper的插件 -->
<property name="plugins">
    <array>
        <!-- 传入插件的对象 -->
        <bean class="com.github.pagehelper.PageInterceptor">
            <property name="properties">
                <props>
                    <!--使用的数据库是什么就写什么 oracle -->
                    <prop key="helperDialect">mysql</prop> 
                    <!--合理化上一页/下一页-->  
                    <prop key="reasonable">true</prop>
                </props>
            </property>
        </bean>
    </array>
</property>

三. 前端页面查询入口

在 员工管理 的查询所有员工的链接后添加 page 和 size 的默认参数值 , 携带默认参数请求到后台 

page : 要显示的数据的当前页数 ;

size  :  每页显示数据的条数 .

<a href="${pageContext.request.contextPath}/emp/findAll.do?page=1&size=5">
    <i class="fa fa-circle-o"></i> 员工管理
</a>

四. 后台服务器接收前端请求

1. 在后台服务器接收前端请求方法及请求参数 

前端页面有传递相应的参数值过来, 就获取前端页面传递过来的参数值进行分页展示操作, 没有则使用默认设置的参数值 :

//查询所有 Emp - 分页
 @RequestMapping("/findAll.do")
private ModelAndView findAll(@RequestParam(name = "page", required = true, defaultValue = "1")Integer page,
                             @RequestParam(name = "size", required = true, defaultValue = "5")Integer size) throws Exception {
    ModelAndView mv = new ModelAndView();
    List<Emp> empList = empService.findAll(page, size);
    PageInfo pageInfo = new PageInfo(empList);
    mv.addObject("pageInfo", pageInfo);
    mv.setViewName("emp-list");
    return mv;
}

五. 编写业务层接口及实现类

业务层接口 :

定义查询所有的接口, 设定分页需要的参数 (当前页码数, 每页显示条数)

//查询所有 Emp
public List<Emp> findAll(Integer page, Integer size) throws Exception;

业务层实现类 :

在要分页的数据调用前添加分页申明参数 PageHelper.startPage(page,size)

public List<Emp> findAll(Integer page, Integer size) throws Exception {
    PageHelper.startPage(page,size);
    return empDao.findAll();
}

六. 前端数据展示页面编写

分页查询的数据以及分页的数据全封装在 pageInfo 中

<table id="dataList" class="table table-bordered table-striped table-hover dataTable">
    <thead>
        <tr>
            <th class="sorting_asc">编号</th>
			<th class="sorting_desc_disabled">姓名</th>
			<th class="sorting_desc_disabled">性别</th>
			<th class="sorting_asc">年龄</th>
			<th class="sorting_asc">生日</th>
			<th class="sorting_asc_disabled">婚否</th>
			<th class="sorting_asc">邮箱</th>
			<th class="text-center">部门编号</th>
			<th class="text-center">操作</th>
		</tr>
	</thead>
	<tbody>
		<c:forEach items="${pageInfo.list}" var="emp">
			<tr>
				<td>${emp.id}</td>
				<td>${emp.name}</td>
				<td>${emp.gender}</td>
				<td>${emp.age}</td>
				<td>${emp.birthdayStr}</td>
				<td>${emp.marryStr}</td>
				<td>${emp.email}</td>
				<td>${emp.deptId}</td>
				<td class="text-center">
					<a href="${pageContext.request.contextPath}/emp/findById.do?id=${emp.id}" class="btn bg-olive btn-xs">修改</a>
					<%--<a href="${pageContext.request.contextPath}/emp/deleteEmp.do?id=${emp.id}" class="btn bg-olive btn-xs">删除</a>--%>
                    <input type="button" onclick=deleteAsk(${emp.id}) value="删除询问" />
                </td>
            </tr>
        </c:forEach>
    </tbody>
</table>

七. 页码的实现

<div class="box-tools pull-right">
    <ul class="pagination">
        <li><a href="${pageContext.request.contextPath}/emp/findAll.do?page=1&size=${pageInfo.pageSize}" aria-label="Previous">首页</a></li>
        <li><a href="${pageContext.request.contextPath}/emp/findAll.do?page=${pageInfo.pageNum-1}&size=${pageInfo.pageSize}">上一页</a></li>
        <c:forEach begin="1" end="${pageInfo.pages}" var="pageNum">
            <li>
                <a href="${pageContext.request.contextPath}/emp/findAll.do?page=${pageNum}&size=${pageInfo.pageSize}">${pageNum}</a>
            </li>
        </c:forEach>
        <li><a href="${pageContext.request.contextPath}/emp/findAll.do?page=${pageInfo.pageNum+1}&size=${pageInfo.pageSize}">下一页</a></li>
        <li><a href="${pageContext.request.contextPath}/emp/findAll.do?page=${pageInfo.pages}&size=${pageInfo.pageSize}" aria-label="Next">尾页</a></li>
    </ul>
</div>

八. 每页显示条数的实现

<div class="box-footer">
	<div class="pull-left">
		<div class="form-group form-inline">
		    总共 ${pageInfo.pages} 页，共 ${pageInfo.total} 条数据。 每页显示
			<select class="form-control" id="changePageSize" onchange="changePageSize()" >
				<option>5</option>
				<option>10</option>
				<option>15</option>
				<option>20</option>
			</select> 条
		</div>
	</div>
</div>

<script>

    //每页显示条数改变
    function changePageSize() {
        //获取下拉框的值
        var pageSize = $("#changePageSize").val();
        //向服务器发送请求，改变每页显示条数
        location.href = "${pageContext.request.contextPath}/emp/findAll.do?page=1&size=" + pageSize;
    }

</script>

 

代码下载: https://pan.baidu.com/s/1btZa4VBZzKeFCoNfuntJfg

***此代码需在 jdk1.8 下运行使用***