注意：
嵌入到项目中时必须以带参形式访问：
http://localhost:8081/DETECT-X/showConnLogsByPager.action?pageSize=5&pager.offset=0&pageNo=1
导入 Maven 依赖：
<!-- https://mvnrepository.com/artifact/jsptags/pager-taglib -->
<dependency>
<groupId>jsptags</groupId>
<artifactId>pager-taglib</artifactId>
<version>2.0</version>
</dependency>
Controller:
ConnLogs 为 bean
); // 这里的Total值是指的所有记录，也就是数据条数总数，这个要从数据库中拿，这里是用的静态数据测试
@RequestMapping("showConnLogsByPager")
public ModelAndView showConnLogsByPager(PageInfo<ConnLogs> pi) {
ModelAndView modelAndView = new ModelAndView("/jsp/ConnLogs/ConnLogsViewer.jsp");
RepoDao repoDao = new RepoDaoImp();
int userId = (int) request.getSession().getAttribute("userId");
int pagerOOfset = Integer.parseInt(request.getParameter("pager.offset"));
Object connLogsCount = repoDao.getConnLogsCountByUid(userId);
pi.setTotal((Long) connLogsCount);
// pageSize 决定每页显示多少条，setPageSize 必须和 showPage 的 count 变量值一样，否则每页就会有重复
int pageSize = 8;
pi.setPageSize(pageSize);
// 传入偏移量和pageSize 从数据库中得到分页后的数据 这种是数据库分页 最优的一种分页方式
List<ConnLogs> connLogs = repoDao.showPage(userId, pagerOOfset, pageSize);
modelAndView.addObject("connLogs", connLogs);
// 记录总数
modelAndView.addObject("connLogsCount",connLogsCount);
modelAndView.addObject("pi", pi);
return modelAndView;
}sql语句：
SELECT * FROM conn_logs WHERE uid=? ORDER BY gid DESC
jsp：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="pg" uri="http://jsptags.com/tags/navigation/pager" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<base href="<%= basePath %>"/>
<title>default page</title>
<meta id="pageSizeByMeta" content="${pi.pageSize }">
<%--<link rel="stylesheet" href="/DETECT-X/disableBodySelect.css">--%>
<link rel="stylesheet" href="/DETECT-X/bootstrap_3.3.6/bootstrap.min.css">
<script src="/DETECT-X/jquery.min.js"></script>
<script src="/DETECT-X/bootstrap_3.3.6/bootstrap.min.js"></script>
</head>
<body>
<br>
<br>
<br>
<br>
<table class="table table-striped">
<thead>
<tr>
<td>gid</td>
<td>warnningPtLink</td>
</tr>
</thead>
<tbody>
<c:forEach var="C" items="${connLogs}">
<tr>
<td>${C.gid}</td>
<td>${C.warningPtLink}</td>
</tr>
</c:forEach>
</tbody>
</table>
<nav>
<ul class="pagination">
<pg:pager url="showConnLogsByPager.action" items="${pi.total }" maxPageItems="${pi.pageSize }"
export="currentPageNumber=pageNumber">
<pg:param name="pageSize" value="${pi.pageSize }"/>
<pg:first>
<li><a href="${pageUrl}&pageNo=${pageNumber }"><span class="glyphicon glyphicon-home"></span></a></li>
</pg:first>
<pg:prev>
<li>
<a href="${pageUrl }&pageNo=${pageNumber }" aria-label="Previous">
<span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span>
</a>
</li>
</pg:prev>
<pg:pages>
<c:choose>
<c:when test="${pageNumber eq currentPageNumber }">
<li><a><font color="red">${pageNumber }</font></a></li>
</c:when>
<c:otherwise>
<li>
<a href="${pageUrl }&pageNo=${pageNumber }">${pageNumber }</a>
</li>
</c:otherwise>
</c:choose>
</pg:pages>
<pg:next>
<li>
<a href="${pageUrl }&pageNo=${pageNumber }" aria-label="Next">
<span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>
</a>
</li>
</pg:next>
<pg:last>
<li><a href="${pageUrl }&pageNo=${pageNumber }"><font
class="glyphicon glyphicon-modal-window"></font></a></li>
</pg:last>
</pg:pager>
<script>
$(function () {
$("#gotoPageByMetro").click(function () {
var pageNum = $("#beGotoPageNum").val();
var pageSizeOfJs = $("#pageSizeByMeta").attr("content");
console.log(pageSizeOfJs + " " + pageNum);
// pageNum （页码） 需要 -1 后 再乘以 pagesize ，才能得到正确的 pager.offset 值
var pagerOffset = pageSizeOfJs * (pageNum - 1);
window.location.href = "showConnLogsByPager.action?pageSize=${pi.pageSize }&pager.offset=" + pagerOffset + "&pageNo=" + pageNum;
});
// 给检索框绑定回车事件
$('#beGotoPageNum').bind('keypress', function (event) {
if (event.keyCode == "13") {
var pageNum = $("#beGotoPageNum").val();
var pageSizeOfJs = $("#pageSizeByMeta").attr("content");
console.log(pageSizeOfJs + " " + pageNum);
// pageNum （页码） 需要 -1 后 再乘以 pagesize ，才能得到正确的 pager.offset 值
var pagerOffset = pageSizeOfJs * (pageNum - 1);
window.location.href = "showConnLogsByPager.action?pageSize=${pi.pageSize }&pager.offset=" + pagerOffset + "&pageNo=" + pageNum;
}
});
});
</script>
<div class="col-lg-2">
<div class="input-group">
<input id="beGotoPageNum" type="text" class="form-control">
<span class="input-group-btn">
<button id="gotoPageByMetro" class="btn btn-default" type="button">
<span class="glyphicon glyphicon-modal-window"></span>
</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</ul>
</nav>
</body>
</html>
测试效果：
