JUI/DWZ 分页 Servlet

分页介绍

参考：官方用户手册中的“分页组件”

分页思路服务器返回当前页的数据，总条数，再由js来生成分页标签。分页是配合服务器端来处理的, 不是存js做的分页。因为如果数据量很大，比如有好几百页，性能很慢。

分页组件参数要由服务器传过来targetType，totalCount，numPerPage，pageNumShown，currentPage 。框架会自动把下面的form中pageNum修改后，ajax重新发请求。下面这个form是用来存查询条件的

<form id="pagerForm" action="xxx" method="post">

<input type="hidden" name="pageNum" 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

分页组件使用方法：

测试方法，currentPage从1改为2，就是第2页了，把上面那句改为：

参数说明:

targetType: navTab或dialog，用来标记是navTab上的分页还是dialog上的分页（dialog是弹窗窗口的模式，如果是dialog那么下面对应的targetType和onsubmit="return
navTabSearch(this);" 等都要修改(dialogSearch(this))）

totalCount: 总条数

numPerPage: 每页显示多少条

pageNumShown: 页标数字多少个

currentPage: 当前是第几页

注意：

服务器端返回一个页面碎片，其中包括pagerForm, table, 和分页的div。只要把这个页面碎片组装好就行。

实际应用

前台（JSP）：

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>

</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})">

<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>

分页实体类（DwzPage.java）：

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）：

// 组装查询条件

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）：

/**

*

* @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