CRUD（19）：查询-显示分页细节
一、页面首先展示第一页。
$(function() {
to_page(1);
});
二、带页码发送ajax请求。
function to_page(pn) {
$.ajax({
url : "${APP_PATH}/emps",
data : "pn=" + pn,
type : "GET",
success : function(result) {
//console.log(result);
//1.解析并显示员工数据
build_emps_table(result);
//2.解析并显示分页信息
build_page_info(result);
//3.解析并显示分页条
build_page_nav(result);
}
});
}
三、每次发送ajax请求之前，先清空区域里已有的数据，防止数据重复显示；
如：
$("#emps_table tbody").empty();
四、页码按钮选中变蓝。
//页码按钮选中变蓝
if (result.extend.pageInfo.pageNum == item) {
numLi.addClass("active");
}
五、为页码按钮添加点击事件。
如：
numLi.click(function() {
to_page(item);
});
六、首页和末页设置为相应的页码数。
七、前一页与后一页的逻辑：如果不存在前一页，则禁用前一页按钮；否则，如果存在前一页，则将页码减小一个数。后一页逻辑同上。
if (result.extend.pageInfo.hasPreviousPage == false) {
prePageLi.addClass("disabled");
} else {
prePageLi.click(function() {
to_page(result.extend.pageInfo.pageNum - 1);
});
}
八、分页合理化：
reasonable：分页合理化参数，默认值为false。当该参数设置为 true 时，pageNum<=0 时会查询第一页， pageNum>pages（超过总数时），会查询最后一页。默认false 时，直接根据参数进行查询。
所以需要在mybatis-config.xml中添加：
<plugins>
<plugin interceptor="com.github.pagehelper.PageInterceptor">
<!-- 调整分页合理化 -->
<property name="reasonable" value="true" />
</plugin>
</plugins>
九、源代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>员工列表</title>
<!-- 拿到当前项目路径，以/开始，不以/结束 -->
<%
pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- 引入jquery -->
<script type="text/javascript"
src="${APP_PATH }/static/js/jquery-1.12.4.min.js"></script>
<!-- 引入Bootstrap样式 -->
<link
href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="${APP_PATH
}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 搭建显示页面 -->
<div class="container">
<!-- 标题 -->
<div class="row">
<div class="col-md-12">
<h1>SSM-CRUD</h1>
</div>
</div>
<!-- 按钮 -->
<div class="row">
<div class="col-md-4 col-md-offset-8">
<button class="btn btn-primary">新增</button>
<button class="btn btn-danger">删除</button>
</div>
</div>
<!-- 显示表格数据 -->
<div class="row">
<div class="col-md-12">
<table class="table table-hover" id="emps_table">
<thead>
<tr>
<th>#</th>
<th>empName</th>
<th>gender</th>
<th>email</th>
<th>deptName</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<!-- 显示分页 -->
<div class="row">
<!-- 分页文字信息 -->
<div class="col-md-6" id="page_info_area"></div>
<!-- 分页条信息 -->
<div class="col-md-6" id="page_nav_area"></div>
</div>
</div>
<script type="text/javascript">
<!--页面加载完成以后直接发送一个ajax请求，拿到分页数据-->
$(function() {
to_page(1);
});
function to_page(pn) {
$.ajax({
url : "${APP_PATH}/emps",
data : "pn=" + pn,
type : "GET",
success : function(result) {
//console.log(result);
//1.解析并显示员工数据
build_emps_table(result);
//2.解析并显示分页信息
build_page_info(result);
//3.解析并显示分页条
build_page_nav(result);
}
});
}
//解析显示员工数据
function build_emps_table(result) {
//首先清空原来的emps_table tbody
$("#emps_table tbody").empty();
var emps = result.extend.pageInfo.list;
$.each(emps, function(index, item) {
var empIdTd = $("<td></td>").append(item.empId);
var empNameTd = $("<td></td>").append(item.empName);
var genderTd = $("<td></td>").append(
item.gender == 'm' ? "男" : "女");
var emailTd = $("<td></td>").append(item.email);
var deptNameTd = $("<td></td>")
.append(item.department.deptName);
var editBtn = $("<button></button>").addClass(
"btn btn-info btn-sm").append(
$("<span></span>").addClass(
"glyphicon
glyphicon-pencil")).append("编辑");
var delBtn = $("<button></button>").addClass(
"btn btn-danger btn-sm").append(
$("<span></span>")
.addClass("glyphicon
glyphicon-trash")).append(
"删除");
var btnTd = $("<td></td>").append(editBtn).append("
").append(
delBtn);
//append方法执行完成以后还是返回原来的元素
$("<tr></tr>").append(empIdTd).append(empNameTd).append(
genderTd).append(emailTd).append(deptNameTd).append(
btnTd).appendTo("#emps_table tbody");
});
}
//显示分页信息
function build_page_info(result) {
//首先清空原来的
$("#page_info_area").empty();
$("#page_info_area").append(
"当前第" + result.extend.pageInfo.pageNum + "页
共"
+ result.extend.pageInfo.pages +
"页 共"
+ result.extend.pageInfo.total +
"条记录");
}
//显示分页条
function build_page_nav(result) {
//首先清空原来的
$("#page_nav_area").empty();
var ul = $("<ul></ul>").addClass("pagination");
var firstPageLi =
$("<li></li>").append($("<a></a>").append("首页"))
.attr("href", "#");
var prePageLi = $("<li></li>").append(
$("<a></a>").append("«"));
if (result.extend.pageInfo.hasPreviousPage == false) {
prePageLi.addClass("disabled");
} else {
prePageLi.click(function() {
to_page(result.extend.pageInfo.pageNum - 1);
});
}
var nextPageLi = $("<li></li>").append(
$("<a></a>").append("»"));
if (result.extend.pageInfo.hasNextPage == false) {
nextPageLi.addClass("disabled");
} else {
nextPageLi.click(function() {
to_page(result.extend.pageInfo.pageNum + 1);
});
}
var lastPageLi =
$("<li></li>").append($("<a></a>").append("末页"))
.attr("href", "#");
firstPageLi.click(function() {
to_page("1");
});
lastPageLi.click(function() {
to_page(result.extend.pageInfo.pages);
});
//添加首页和前一页的显示
ul.append(firstPageLi).append(prePageLi);
$.each(result.extend.pageInfo.navigatepageNums,
function(index,
item) {
var numLi =
$("<li></li>").append($("<a></a>").append(item));
//页码按钮选中变蓝
if (result.extend.pageInfo.pageNum == item) {
numLi.addClass("active");
}
numLi.click(function() {
to_page(item);
});
//添加页码显示
ul.append(numLi);
});
//添加下一页和末页的显示
ul.append(nextPageLi).append(lastPageLi);
var navEle = $("<nav></nav>").append(ul);
navEle.appendTo("#page_nav_area");
}
</script>
</body>
</html>
浙公网安备 33010602011771号