参考：官方用户手册中的“分页组件”
分页思路服务器返回当前页的数据，总条数，再由js来生成分页标签。分页是配合服务器端来处理的, 不是存js做的分页。 因为如果数据量很大，比如有好几百页，性能很慢。
分页组件参数要由服务器传过来targetType，totalCount，numPerPage，pageNumShown，currentPage 。框架会自动把下面的form中pageNum修改后，ajax重新发请求。下面这个form是用来存查询条件的
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<form id="pagerForm" action="xxx" method="post">
<input type="hidden" name="pageNum" value="1" />/><!--【必须】value=1可以写死-->
<input type="hidden" name="numPerPage" value="20" /><!--【可选】每页显示多少条-->
<input type="hidden" name="orderField" value="xxx" /><!--【可选】查询排序-->
<input type="hidden" name="orderDirection" value="asc" /><!--【可选】升序降序-->
<!--【可选】其它查询条件，业务有关，有什么查询条件就加什么参数。
也可以在searchForm上设置属性rel=”pagerForm”，js框架会自动把searchForm搜索条件复制到pagerForm中 -->
<input type="hidden" name="name" value="xxx" />
<input type="hidden" name="status" value="active" />
……
</form>
|
分页组件处理分页流程：
1) pagerForm中缓存了当前的查询条件，加上一个pageNum字段
2) 点击分页时动态修改pageNum,重新提交pagerForm
分页组件使用方法：
<div class="pagination" targetType="navTab" totalCount="200" numPerPage="20" pageNumShown="10" currentPage="1"></div>
测试方法，currentPage从1改为2，就是第2页了，把上面那句改为：
<div class="pagination" targetType="navTab" totalCount="200" numPerPage="20" pageNumShown="10" currentPage="2"></div>
参数说明:
targetType: navTab或dialog，用来标记是navTab上的分页还是dialog上的分页 （dialog是弹窗窗口的模式，如果是dialog那么下面对应的targetType和onsubmit="return
navTabSearch(this);" 等都要修改(dialogSearch(this))）
totalCount: 总条数
numPerPage: 每页显示多少条
pageNumShown: 页标数字多少个
currentPage: 当前是第几页
注意：
服务器端返回一个页面碎片，其中包括pagerForm, table, 和分页的div。只要把这个页面碎片组装好就行。
实际应用
前台（JSP）：
|
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
|
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div class="pageHeader">
<form id="pagerForm" rel="pagerForm" onsubmit="return navTabSearch(this);" action="user" method="post">
<input type="hidden" name="pageNum" value="1" />
<input type="hidden" name="numPerPage" value="${dwzPage.numPerPage}" />
<input type="hidden" name="method" value="page" />
<div class="searchBar">
<table class="searchContent">
<tr>
<td>
手机：<input type="text" name="phone" value="${phone}" />
</td>
<td>
名字：<input type="text" name="name" value="${name}" />
</td>
<td>
<select class="combox" name="status">
<option value="">用户状态</option>
<option value="0" <c:if test="${0 == status }">selected="selected"</c:if>>未激活</option>
<option value="1" <c:if test="${1 == status }">selected="selected"</c:if>>已激活</option>
<option value="2" <c:if test="${2 == status }">selected="selected"</c:if>>拒绝</option>
<option value="3" <c:if test="${3 == status }">selected="selected"</c:if>>取消关注</option>
<option value="4" <c:if test="${4 == status }">selected="selected"</c:if>>离职</option>
<option value="5" <c:if test="${5 == status }">selected="selected"</c:if>>黑名单</option>
</select>
</td>
</tr>
</table>
<div class="subBar">
<ul>
<li><div class="buttonActive"><div class="buttonContent"><button type="submit">检索</button></div></div></li>
</ul>
</div>
</div>
</form>
</div>
<div class="pageContent">
<div class="panelBar">
<ul class="toolBar">
<li><a class="edit" href="user?method=editPage&uid={sid_user}" target="navTab" warn="请选择一个用户"><span>修改</span></a></li>
<li class="line">line</li>
<li><a title="确实要设置为管理员吗?" target="selectedTodo" rel="ids" href="user?method=setAdmin" class="add"><span>设置为管理员</span></a></li>
<li class="line">line</li>
</ul>
</div>
<table class="table" width="100%" layoutH="138">
<thead>
<tr>
<th width="22"><input type="checkbox" group="ids" class="checkboxCtrl"></th>
<th width="70">姓名</th>
<th width="120">手机</th>
<th width="80">用户状态</th>
<th width="120">用户类型</th>
<th >备注</th>
</tr>
</thead>
<tbody>
<c:forEach items="${dwzPage.list }" var="user" >
<tr target="sid_user" rel="${user.id }">
<td><input name="ids" value="${user.id }" type="checkbox" ></td>
<td>${user.name }</td>
<td>${user.phone }</td>
<c:if test="${user.status==0 }">
<td>未激活</td>
</c:if>
<c:if test="${user.status==1 }">
<td>已激活</td>
</c:if>
<c:if test="${user.status==2 }">
<td>拒绝</td>
</c:if>
<c:if test="${user.status==3 }">
<td>取消关注</td>
</c:if>
<c:if test="${user.status==4 }">
<td>离职</td>
</c:if>
<c:if test="${user.status==5 }">
<td>黑名单</td>
</c:if>
<c:if test="${user.status>5 }">
<td>其他</td>
</c:if>
<c:if test="${user.type==0 }">
<td>管理员</td>
</c:if>
<c:if test="${user.type==1 }">
<td>普通用户</td>
</c:if>
<c:if test="${user.type>1 }">
<td>其他</td>
</c:if>
<td>${user.remark }</td>
</tr>
</c:forEach>
</tbody>
</table>
<div class="panelBar">
<div class="pages">
<span>显示</span>
<select class="combox" name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value})">
<!-- <select class="combox" name="numPerPage" onchange="dialogPageBreak({numPerPage:this.value})"> -->
<option value="10" <c:if test="${10 == dwzPage.numPerPage }">selected="selected"</c:if>>10</option>
<option value="20" <c:if test="${20 == dwzPage.numPerPage }">selected="selected"</c:if>>20</option>
<option value="50" <c:if test="${50 == dwzPage.numPerPage }">selected="selected"</c:if>>50</option>
</select>
<span>条，共${dwzPage.totalCount}条</span>
</div>
<div class="pagination" targetType="navTab" totalCount="${dwzPage.totalCount}" numPerPage="${dwzPage.numPerPage }" pageNumShown="${dwzPage.pageNumShown }" currentPage="${dwzPage.currentPage }"></div>
<%-- <div class="pagination" targetType="dialog" totalCount="${dwzPage.totalCount}" numPerPage="${dwzPage.numPerPage }" pageNumShown="10" currentPage="${dwzPage.pageNum }"></div> --%>
<!-- <div class="pagination" targetType="navTab" totalCount="200" numPerPage="20" pageNumShown="10" currentPage="1"></div> -->
</div>
</div>
|
分页实体类（DwzPage.java）：
|
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
|
package com.qsachina.util;
import java.util.List;
public class DwzPage {
private int currentPage = 1; // 当前页数，默认第一页
private int numPerPage = 20; // 每页个数，默认20
private int totalCount = 0; // 总数，默认0
private int pageNumShown = 10; // 页标数字多少个，默认10
private String orderField; // 排序方式
private String orderDirection; // 升序降序
private List<Object> list; // 返回的集合
public int getNumPerPage() {
return numPerPage;
}
public void setNumPerPage(int numPerPage) {
this.numPerPage = numPerPage;
}
public int getTotalCount() {
return totalCount;
}
public void setTotalCount(int totalCount) {
this.totalCount = totalCount;
}
public String getOrderField() {
return orderField;
}
public void setOrderField(String orderField) {
this.orderField = orderField;
}
public String getOrderDirection() {
return orderDirection;
}
public void setOrderDirection(String orderDirection) {
this.orderDirection = orderDirection;
}
public List<Object> getList() {
return list;
}
public void setList(List<Object> list) {
this.list = list;
}
public int getPageNumShown() {
return pageNumShown;
}
public void setPageNumShown(int pageNumShown) {
this.pageNumShown = pageNumShown;
}
public int getCurrentPage() {
return currentPage;
}
public void setCurrentPage(int currentPage) {
this.currentPage = currentPage;
}
}
|
Servlet类（UserServlet.java）：
|
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
|
// 组装查询条件
String name = request.getParameter("name");
String phone = request.getParameter("phone");
String status = request.getParameter("status");
Map<String, String> params = new HashMap<>();
if(StringUtil.isNotEmpty(name)){ // name等参数可能是null
params.put("name", name.trim());
request.setAttribute("name", name.trim()); // 查询条件设置回前台
}
if(StringUtil.isNotEmpty(phone)){
params.put("phone", phone.trim());
request.setAttribute("phone", phone.trim());
}
if(StringUtil.isNotEmpty(status)){
params.put("status", status.trim());
request.setAttribute("status", status.trim());
}
// 分页
String currentPage = request.getParameter("pageNum");
String numPerPage = request.getParameter("numPerPage");
DwzPage dwzPage = userService.getPageByParams(params,currentPage,numPerPage);
request.setAttribute("dwzPage", dwzPage);
request.getRequestDispatcher(page).forward(request, response);
|
Service类（UserService.java）：
|
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
|
/**
*
* @param params
* 查询条件
* @param currentPage
* 当前页
* @param numPerPage
* 每页个数
* @return 分页实体类
*/
public DwzPage getPageByParams(Map<String, String> params, String currentPage, String numPerPage) {
DwzPage dwzPage = new DwzPage();
if(StringUtil.isNotEmpty(currentPage)){
dwzPage.setCurrentPage(Integer.parseInt(currentPage));
}
if(StringUtil.isNotEmpty(numPerPage)){
dwzPage.setNumPerPage(Integer.parseInt(numPerPage));
}
List<Object> userList = new ArrayList<>();
StringBuffer sbSQL = new StringBuffer(); // 查询的sql
StringBuffer countSbSQL = new StringBuffer(); // 计算总个数sql
sbSQL.append("select * from wb_user where 0=0 ");
countSbSQL.append("SELECT COUNT(id) as count FROM wb_user where 0=0 ");
Iterator<String> it = params.keySet().iterator();
while (it.hasNext()) {
String key = (String) it.next();
sbSQL.append(" and ").append(key).append(" like '%").append(params.get(key)).append("%'");
countSbSQL.append(" and ").append(key).append(" like '%").append(params.get(key)).append("%'");
}
sbSQL.append(" ORDER BY create_date ASC");
// 分页
sbSQL.append(" LIMIT ").append((dwzPage.getCurrentPage() - 1) * dwzPage.getNumPerPage()).append(",")
.append(dwzPage.getNumPerPage());
ResultSet rs = null;
ResultSet rsCount = null;
User user = null;
try {
rs = this.executeQuery(sbSQL.toString(), null);
rsCount = this.executeQuery(countSbSQL.toString(), null);
while (rs.next()) {
user = new User();
user.setId(rs.getLong("id"));
user.setName(rs.getString("name"));
user.setOpenId(rs.getString("openId"));
user.setPhone(rs.getString("phone"));
user.setStatus(rs.getInt("status"));
user.setType(rs.getInt("type"));
user.setRemark(rs.getString("remark"));
user.setCreateDate(rs.getTimestamp("create_date"));
user.setUpdateDate(rs.getTimestamp("update_date"));
userList.add(user);
}
while (rsCount.next()) {
dwzPage.setTotalCount(rsCount.getInt(1)); // 设置总数
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
this.close(conn, pstmt, rs);
}
dwzPage.setList(userList);
return dwzPage;
}
|
密码 阿宓生日，链接：http://pan.baidu.com/s/1kTtRWW3 密码：tzpc
《DWZ笔记五》联动菜单等可以参考此博客http://heavengate.blog.163.com/blog/#m=0&t=1&c=fks_084070086081084067086082083095086086083064092087086070087
JUI/DWZ 分页 Servlet的相关教程结束。
