一个开发团队里如果没有前端工程师，或项目里如果没有做前后端分离，或仍在使用JSP, 那 Java后端工程师必要负责前端的开发，可以算半个前端工程师。
在前端的列表页面经常要用到翻页, 就需要用到翻页插件, 对后端工程师来说，直接引用开源成熟度高的、美观的分页插件是个高效的选择。
jqPaginator简洁、高度自定义的jQuery分页组件，适用于多种应用场景, GitHub。
引入jqPaginator.js
到 github 下载 jqPaginator.js，在项目中引入，还需要引入 jQuery.js。 GitHub上的 Release 包中有使用示例。
示例原码：
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>jqPaginator</title>
<link type="text/css" rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.1.1/css/bootstrap.min.css"/>
</head>
<body style="padding:10px;">
<p id="p1"></p>
<ul class="pagination" id="pagination1"></ul>
<p id="p2"></p>
<ul class="pagination" id="pagination2"></ul>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jqPaginator.js"></script>
<script type="text/javascript">
$.jqPaginator('#pagination1', {
totalPages: 100,
visiblePages: 10,
currentPage: 3,
onPageChange: function (num, type) {
$('#p1').text(type + '：' + num);
}
});
$.jqPaginator('#pagination2', {
totalPages: 100,
visiblePages: 10,
currentPage: 3,
prev: '<li class="prev"><a href="javascript:;">Previous</a></li>',
next: '<li class="next"><a href="javascript:;">Next</a></li>',
page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
onPageChange: function (num, type) {
$('#p2').text(type + '：' + num);
}
});
</script>
</body>
</html>
分析：
- 前端分页至少要拿到的数据:当前页码(currentPage), 每页显示条数(pageSize), 总记录数(total), 总页数(totalPage)。
- 翻页相当于重新提交了表单查询，表单数据包含当前页码(currentPage)和每页显示条数(pageSize)， 是需要传给后台。
- 后台的分页插件拦截查询SQL，先根据SQL条件统计总记录数(count)，根据每页显示条数(pageSize)算出总页数，根据页码算出从第几条数据开始查，取(pageSize)条数, 分页插件再拼接将SQL拼接分页查询(limit)，获得结果；后台代码将查询结果和分页数据返回给前端。
- 分页参数：
页码：currentPage
每页显示条数：pageSize
总计录数：total
总页数：totalPage = (count/pageSize)+1, 或 (int) Math.ceil(count x 1.0/pageSize)
从第几条索引开始查：startRow = (currentPage-1) x pageSize
查多少条：pageSize
实践示例
在JSP页面使用前端分页插件，查form表单里分别隐藏了当前页码(currentPage)和每页显示条数(currentPage)属性。
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<jsp:include page="../common/setting.jsp"/>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../dist/js/jquery.min.js"></script>
<!--为了显示https图片-->
<jsp:include page="../common/head.jsp"/>
</head>
<body class="hold-transition skin-blue sidebar-mini fixed">
<div class="wrapper">
<!-- 顶部栏 -->
<jsp:include page="../common/top.jsp"/>
<!-- 左侧导航 -->
<jsp:include page="../common/nav.jsp"/>
<div class="content-wrapper">
<section class="content">
<div class="box-body">
<!-- 内容主体 -->
<div class="row">
<form id="queryForm" role="form" action="/Cash/queryList" method="post">
<input type="hidden" name="pageNum" id="pageNum" value="${vo.pageNum}"/>
<input type="hidden" name="pageSize" id="pageSize" value="${vo.pageSize}"/>
<div class="col-xs-12">
<div class="box">
<!-- 表格头部/标题 -->
<div class="box-header" style="text-align:center;border-bottom:1px solid #e5e5e5;">
<h3 class="box-title">提现查询</h3>
</div>
<div class="form-horizontal clearfix"
style="background-color:#fff;margin-top:10px; padding-bottom:10px;">
<div class="col-lg-4">
<div class="form-group">
<label class="col-lg-4 control-label">业务员姓名</label>
<div class="col-lg-8">
<input type="text" class="form-control match-search" placeholder=""
name="name" value="${vo.name}">
<ul class="match-list"></ul>
</div>
</div>
</div>
<div class="col-lg-4" style="text-align:center;">
<button type="submit" class="btn btn-primary" id="searchBtn">查 询</button>
<button type="button" class="btn btn-primary" onclick="resetForm()">重 置</button>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="row">
<div class="col-xs-12">
<div class="box table-box" id="table-box">
<!-- 表格头部/标题 -->
<div class="box-header" style="text-align:center;">
<h3 class="box-title"></h3>
</div>
<!-- 表格内容 = 表头 + 表格列 -->
<table id="example2" class="table table-bordered table-hover">
<thead>
<tr>
<th>序号</th>
<th>业务员姓名</th>
</tr>
</thead>
<tbody id="tableTBody" class="tableTBody">
<c:forEach var="applyCash" items="${WxUserApplyCashList}">
<tr>
<td>${applyCash.id}</td>
<td>${applyCash.name}</td>
</tr>
</c:forEach>
</tbody>
</table>
<!-- 分页插件 -->
<div style="text-align:center;padding-bottom:10px;">
<ul class="pagination" id="pagination1" style="display:table;margin:0 auto;"></ul>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- 公共 JS -->
<jsp:include page="../common/foot.jsp"/>
<script type="text/javascript">
<!-- 分页插件 -->
$.jqPaginator('#pagination1', {
totalPages: ${vo.pages},
visiblePages: 5,
currentPage: ${vo.pageNum},
first: '<li class="first"><a href="javascript:void(0);">首页</a></li>',
prev: '<li class="prev"><a href="javascript:void(0);">上一页</a></li>',
next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
last: '<li class="last"><a href="javascript:void(0);">尾页</a></li>',
page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
onPageChange: function (num) {
pageChange(num);
}
});
<!-- 点击翻页 -->
function pageChange(currPage) {
if ($("#pageNum").val() != currPage) {
$("#pageNum").val(currPage);
$("#searchBtn").click();
}
}
/*提现弹框*/
function getCash(id) {
$("#getCashId").val(id);
$("#checkPayModal").modal();
}
/*重置表单*/
function resetForm() {
$("input[type='text']").val("");
}
</script>
</body>
</html>
更多内容请访问：IT源点
注意：本文归作者所有，未经作者允许，不得转载
