注：圖片如果損壞，點擊文章鏈接：https://www.toutiao.com/i6803544440112677379/
首先完成分頁
引入PageHelper(之前已經添加過了)
在spring-persist-mybatis.xml配置PageHelper插件
找到AdminMapper.xml完成代碼
完成selectAdminByKeyword
AdminMapper接口中聲明方法
AdminService接口中添加方法
具體實現
AdminHandler中添加的方法
準備admin-page.jsp
添加代碼
<%@ 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 lang="zh-CN">
<%@include file="/WEB-INF/include-head.jsp"%>
<body>
<%@ include file="/WEB-INF/include-nav.jsp"%>
<div class="container-fluid">
<div class="row">
<%@ include file="/WEB-INF/include-sidebar.jsp"%>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<i class="glyphicon glyphicon-th"></i> 數據列表
</h3>
</div>
<div class="panel-body">
<form class="form-inline" role="form" style="float: left;">
<div class="form-group has-feedback">
<div class="input-group">
<div class="input-group-addon">查詢條件</div>
<input class="form-control has-success" type="text"
placeholder="請輸入查詢條件">
</div>
</div>
<button type="button" class="btn btn-warning">
<i class="glyphicon glyphicon-search"></i> 查詢
</button>
</form>
<button type="button" class="btn btn-danger"
style="float: right; margin-left: 10px;">
<i class=" glyphicon glyphicon-remove"></i> 刪除
</button>
<button type="button" class="btn btn-primary"
style="float: right;" onclick="window.location.href='add.html'">
<i class="glyphicon glyphicon-plus"></i> 新增
</button>
<br>
<hr style="clear: both;">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th width="30">#</th>
<th width="30"><input type="checkbox"></th>
<th>賬號</th>
<th>名稱</th>
<th>郵箱地址</th>
<th width="100">操作</th>
</tr>
</thead>
<tbody>
<c:if test="${empty requestScope.pageInfo.list }">
<tr>
<td colspan="6" align="center">抱歉！沒有查詢到您要的數據！</td>
</tr>
</c:if>
<c:if test="${!empty requestScope.pageInfo.list }">
<c:forEach items="${requestScope.pageInfo.list }" var="admin" varStatus="myStatus">
<tr>
<td>${myStatus.count }</td>
<td><input type="checkbox"></td>
<td>${admin.loginAcct }</td>
<td>${admin.userName }</td>
<td>${admin.email }</td>
<td>
<button type="button" class="btn btn-success btn-xs">
<i class=" glyphicon glyphicon-check"></i>
</button>
<button type="button" class="btn btn-primary btn-xs">
<i class=" glyphicon glyphicon-pencil"></i>
</button>
<button type="button" class="btn btn-danger btn-xs">
<i class=" glyphicon glyphicon-remove"></i>
</button>
</td>
</tr>
</c:forEach>
</c:if>
</tbody>
<tfoot>
<tr>
<td colspan="6" align="center">
<ul class="pagination">
<li class="disabled"><a href="#">上一頁</a></li>
<li class="active"><a href="#">1 <span
class="sr-only">(current)</span></a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">下一頁</a></li>
</ul>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
運行查看下
分頁導航條
加入pagination的環境
引入
<script type="text/javascript">
$(function(){
// 調用後面聲明的函數對頁碼導航條進行初始化操作
initPagination();
});
// 生成頁碼導航條的函數
function initPagination() {
// 獲取總記錄數
var totalRecord = ${requestScope.pageInfo.total};
// 聲明一個JSON對象存儲Pagination要設置的屬性
var properties = {
num_edge_entries: 3, // 邊緣頁數
num_display_entries: 5, // 主體頁數
callback: pageSelectCallback, // 指定用戶點擊“翻頁”的按鈕時跳轉頁面的回調函數
items_per_page: ${requestScope.pageInfo.pageSize}, // 每頁要顯示的數據的數量
current_page: ${requestScope.pageInfo.pageNum - 1}, // Pagination內部使用pageIndex來管理頁碼，pageIndex從0開始，pageNum從1開始，所以要減一
prev_text: "上一頁", // 上一頁按鈕上顯示的文本
next_text: "下一頁" // 下一頁按鈕上顯示的文本
};
// 生成頁碼導航條
$("#Pagination").pagination(totalRecord, properties);
}
// 回調函數的含義：聲明出來以後不是自己調用，而是交給系統或框架調用
// 用戶點擊“上一頁、下一頁、1、2、3……”這樣的頁碼時調用這個函數實現頁面跳轉
// pageIndex是Pagination傳給我們的那個“從0開始”的頁碼
function pageSelectCallback(pageIndex, jQuery) {
// 根據pageIndex計算得到pageNum
var pageNum = pageIndex + 1;
// 跳轉頁面
window.location.href = "admin/get/page.html?pageNum="+pageNum+"&keyword=${param.keyword}";
// 由於每一個頁碼按鈕都是超鏈接，所以在這個函數最後取消超鏈接的默認行爲
return false;
}
</script>
替換
有個地方我們註釋一下jquery.pagination.js中
帶上關鍵字進行查詢，在admin-page.jsp中
翻頁時保持查詢條件
點擊刪除
調整刪除按鈕
代碼
<a href="admin/remove/${admin.id }/${requestScope.pageInfo.pageNum }/${param.keyword }.html" class="btn btn-danger btn-xs"><i class=" glyphicon glyphicon-remove"></i></a>
編輯handler
添加remove方法（service、serviceimpl）
測試成功
新增
跳轉表單頁面
之前數據庫賬戶沒有加唯一索引，修改下表
ALTER TABLE `t_admin` ADD UNIQUE INDEX(`login_acct`)
調整按鈕admin-page.jsp
添加mvc:view-controller
添加頁面admin-add.jsp
添加代碼
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<%@include file="/WEB-INF/include-head.jsp"%>
<body>
<%@ include file="/WEB-INF/include-nav.jsp"%>
<div class="container-fluid">
<div class="row">
<%@ include file="/WEB-INF/include-sidebar.jsp"%>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<ol class="breadcrumb">
<li><a href="/admin/to/main/page.html">首頁</a></li>
<li><a href="/admin/get/page.html">數據列表</a></li>
<li class="active">新增</li>
</ol>
<div class="panel panel-default">
<div class="panel-heading">
表單數據
<div style="float: right; cursor: pointer;" data-toggle="modal"
data-target="#myModal">
<i class="glyphicon glyphicon-question-sign"></i>
</div>
</div>
<div class="panel-body">
<form action="admin/save.html" method="post" role="form">
<p>${requestScope.exception.message }</p>
<div class="form-group">
<label for="exampleInputPassword1">登錄賬號</label>
<input
name="loginAcct"
type="text" class="form-control" id="exampleInputPassword1"
placeholder="請輸入登錄賬號">
</div>
<div class="form-group">
<label for="exampleInputPassword1">登錄密碼</label>
<input
name="userPswd"
type="text" class="form-control" id="exampleInputPassword1"
placeholder="請輸入登錄密碼">
</div>
<div class="form-group">
<label for="exampleInputPassword1">用戶暱稱</label>
<input
name="userName"
type="text" class="form-control" id="exampleInputPassword1"
placeholder="請輸入用戶名稱">
</div>
<div class="form-group">
<label for="exampleInputEmail1">郵箱地址</label>
<input type="email"
name="email"
class="form-control" id="exampleInputEmail1"
placeholder="請輸入郵箱地址">
<p class="help-block label label-warning">請輸入合法的郵箱地址, 格式爲：
[email protected]</p>
</div>
<button type="submit" class="btn btn-success">
<i class="glyphicon glyphicon-plus"></i> 新增
</button>
<button type="reset" class="btn btn-danger">
<i class="glyphicon glyphicon-refresh"></i> 重置
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
編寫handler方法
完成service方法
添加LoginAcctAlreadyInUseException
測試下
更新和新增的思路一致
修改按鈕
<a href="admin/to/edit/page.html?adminId=${admin.id }&pageNum=${requestScope.pageInfo.pageNum }&keyword=${param.keyword }" class="btn btn-primary btn-xs"><i class=" glyphicon glyphicon-pencil"></i></a>
添加頁面
頁面內容
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<%@include file="/WEB-INF/include-head.jsp"%>
<body>
<%@ include file="/WEB-INF/include-nav.jsp"%>
<div class="container-fluid">
<div class="row">
<%@ include file="/WEB-INF/include-sidebar.jsp"%>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<ol class="breadcrumb">
<li><a href="/admin/to/main/page.html">首頁</a></li>
<li><a href="/admin/get/page.html">數據列表</a></li>
<li class="active">更新</li>
</ol>
<div class="panel panel-default">
<div class="panel-heading">
表單數據
<div style="float: right; cursor: pointer;" data-toggle="modal"
data-target="#myModal">
<i class="glyphicon glyphicon-question-sign"></i>
</div>
</div>
<div class="panel-body">
<form action="admin/update.html" method="post" role="form">
<input type="hidden" name="id" value="${requestScope.admin.id }" />
<input type="hidden" name="pageNum" value="${param.pageNum }" />
<input type="hidden" name="keyword" value="${param.keyword }" />
<p>${requestScope.exception.message }</p>
<div class="form-group">
<label for="exampleInputPassword1">登錄賬號</label>
<input
name="loginAcct"
value="${requestScope.admin.loginAcct }"
type="text" class="form-control"
id="exampleInputPassword1" placeholder="請輸入登錄賬號">
</div>
<div class="form-group">
<label for="exampleInputPassword1">用戶暱稱</label>
<input
name="userName"
value="${requestScope.admin.userName }"
type="text" class="form-control"
id="exampleInputPassword1" placeholder="請輸入用戶名稱">
</div>
<div class="form-group">
<label for="exampleInputEmail1">郵箱地址</label>
<input type="email"
name="email"
value="${requestScope.admin.email }" class="form-control" id="exampleInputEmail1"
placeholder="請輸入郵箱地址">
<p class="help-block label label-warning">請輸入合法的郵箱地址, 格式爲：
[email protected]</p>
</div>
<button type="submit" class="btn btn-success">
<i class="glyphicon glyphicon-edit"></i> 更新
</button>
<button type="reset" class="btn btn-danger">
<i class="glyphicon glyphicon-refresh"></i> 重置
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
編寫handler方法
添加業務方法
同樣添加LoginAcctAlreadyInUseForUpdateException
測試下
Admin-page.jsp所有代碼
<%@ 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 lang="zh-CN">
<%@include file="/WEB-INF/include-head.jsp"%>
<link rel="stylesheet" href="css/pagination.css" />
<script type="text/javascript" src="jquery/jquery.pagination.js"></script>
<script type="text/javascript">
$(function(){
// 調用後面聲明的函數對頁碼導航條進行初始化操作
initPagination();
});
// 生成頁碼導航條的函數
function initPagination() {
// 獲取總記錄數
var totalRecord = ${requestScope.pageInfo.total};
// 聲明一個JSON對象存儲Pagination要設置的屬性
var properties = {
num_edge_entries: 3, // 邊緣頁數
num_display_entries: 5, // 主體頁數
callback: pageSelectCallback, // 指定用戶點擊“翻頁”的按鈕時跳轉頁面的回調函數
items_per_page: ${requestScope.pageInfo.pageSize}, // 每頁要顯示的數據的數量
current_page: ${requestScope.pageInfo.pageNum - 1}, // Pagination內部使用pageIndex來管理頁碼，pageIndex從0開始，pageNum從1開始，所以要減一
prev_text: "上一頁", // 上一頁按鈕上顯示的文本
next_text: "下一頁" // 下一頁按鈕上顯示的文本
};
// 生成頁碼導航條
$("#Pagination").pagination(totalRecord, properties);
}
// 回調函數的含義：聲明出來以後不是自己調用，而是交給系統或框架調用
// 用戶點擊“上一頁、下一頁、1、2、3……”這樣的頁碼時調用這個函數實現頁面跳轉
// pageIndex是Pagination傳給我們的那個“從0開始”的頁碼
function pageSelectCallback(pageIndex, jQuery) {
// 根據pageIndex計算得到pageNum
var pageNum = pageIndex + 1;
// 跳轉頁面
window.location.href = "admin/get/page.html?pageNum="+pageNum+"&keyword=${param.keyword}";
// 由於每一個頁碼按鈕都是超鏈接，所以在這個函數最後取消超鏈接的默認行爲
return false;
}
</script>
<body>
<%@ include file="/WEB-INF/include-nav.jsp"%>
<div class="container-fluid">
<div class="row">
<%@ include file="/WEB-INF/include-sidebar.jsp"%>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<i class="glyphicon glyphicon-th"></i> 數據列表
</h3>
</div>
<div class="panel-body">
<form action="admin/get/page.html" method="post" class="form-inline" role="form" style="float: left;">
<div class="form-group has-feedback">
<div class="input-group">
<div class="input-group-addon">查詢條件</div>
<input name="keyword" class="form-control has-success" type="text"
placeholder="請輸入查詢條件">
</div>
</div>
<button type="submit" class="btn btn-warning">
<i class="glyphicon glyphicon-search"></i> 查詢
</button>
</form>
<button type="button" class="btn btn-danger"
style="float: right; margin-left: 10px;">
<i class=" glyphicon glyphicon-remove"></i> 刪除
</button>
<!--
舊代碼
<button type="button" class="btn btn-primary"
style="float: right;" onclick="window.location.href='add.html'">
<i class="glyphicon glyphicon-plus"></i> 新增
</button> -->
<!-- 新代碼 -->
<a style="float: right;" href="admin/to/add/page.html" class="btn btn-primary"><i class="glyphicon glyphicon-plus"></i> 新增</a>
<br>
<hr style="clear: both;">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th width="30">#</th>
<th width="30"><input type="checkbox"></th>
<th>賬號</th>
<th>名稱</th>
<th>郵箱地址</th>
<th width="100">操作</th>
</tr>
</thead>
<tbody>
<c:if test="${empty requestScope.pageInfo.list }">
<tr>
<td colspan="6" align="center">抱歉！沒有查詢到您要的數據！</td>
</tr>
</c:if>
<c:if test="${!empty requestScope.pageInfo.list }">
<c:forEach items="${requestScope.pageInfo.list }" var="admin" varStatus="myStatus">
<tr>
<td>${myStatus.count }</td>
<td><input type="checkbox"></td>
<td>${admin.loginAcct }</td>
<td>${admin.userName }</td>
<td>${admin.email }</td>
<td>
<button type="button" class="btn btn-success btn-xs">
<i class=" glyphicon glyphicon-check"></i>
</button>
<!-- 舊代碼 -->
<!-- <button type="button" class="btn btn-primary btn-xs">
<i class=" glyphicon glyphicon-pencil"></i>
</button> -->
<!-- 新代碼 -->
<a href="admin/to/edit/page.html?adminId=${admin.id }&pageNum=${requestScope.pageInfo.pageNum }&keyword=${param.keyword }" class="btn btn-primary btn-xs"><i class=" glyphicon glyphicon-pencil"></i></a>
<a href="admin/remove/${admin.id }/${requestScope.pageInfo.pageNum }/${param.keyword }.html" class="btn btn-danger btn-xs"><i class=" glyphicon glyphicon-remove"></i></a>
</td>
</tr>
</c:forEach>
</c:if>
</tbody>
<tfoot>
<tr>
<td colspan="6" align="center">
<div id="Pagination" class="pagination"><!-- 這裏顯示分頁 --></div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>