一个开发团队里如果没有前端工程师，或项目里如果没有做前后端分离，或仍在使用JSP, 那 Java后端工程师必要负责前端的开发，可以算半个前端工程师。
在前端的列表页面经常要用到翻页, 就需要用到翻页插件, 对后端工程师来说，直接引用开源成熟度高的、美观的分页插件是个高效的选择。
jqPaginator简洁、高度自定义的jQuery分页组件，适用于多种应用场景, GitHub。
引入jqPaginator.js
到 github 下载 jqPaginator.js，在项目中引入，还需要引入 jQuery.js。 GitHub上的 Release 包中有使用示例。
示例原码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| <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)属性。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
| <%@ 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>
<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>
<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>
|
