dwz系列之三--分页

官方文档说明

分页组件
分页思路服务器返回当前页的数据，总条数，再由js来生成分页标签。分页是配合服务器端来处理的, 不是存js做的分页。
因为如果数据量很大，比如有好几百页，存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" />/><!--【必须】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上的分页
    totalCount: 总条数 
    numPerPage: 每页显示多少条
    pageNumShown: 页标数字多少个
    currentPage: 当前是第几页

我们要做的只是返回那几个参数就可以了。
so，定义一个分页信息对象。

public class BaseConditionVO {
    // 页面显示条目数，默认10
    public final static int PAGE_SHOW_COUNT = 20;
    // 页码，默认第一页
    public int pageNum = 1;
    // 页面个数 默认20
    public int pageSize = 0;
    // 总条目
    public int totalCount = 0;
    // 排序字段
    public String orderField;
    // 排序顺序
    public String orderDirection;
    // 关键字
    public String keywords;
    // 查询状态
    public String status;
    // 查询类型
    public String type;
    // 查询开始时间
    public Date startDate;
    // 查询结束时间
    public Date endDate;
    //省略其他的get，set方法

    //注意
    public int getStartIndex() {
        int pageNum = this.getPageNum() > 0 ? this.getPageNum() - 1 : 0;
        return pageNum * this.getPageSize();
    }

}

controller层代码如下

@RequestMapping("/list")
    public String list(BaseConditionVO vo, Model model) throws ConnectException {
        List<VmInfo> vmlist = vmService.findByCondition(vo);
        Integer totalCount = vmService.findNumberByCondition(vo);
        vo.setTotalCount(totalCount);
        model.addAttribute("list", vmlist);
        model.addAttribute("vo", vo);
        return "vm/vmlist";
    }

其中VmService的findByCondition(vo)方法，采用myBatis实现的分页查询。代码如下：

@Override
    public List<VmInfo> findByCondition(BaseConditionVO vo) {
        RowBounds rb = new RowBounds(vo.getStartIndex(), vo.getPageSize());
        List<VmInfo> list = vmInfoMapper.findByCondition(vo, rb);
        return list;
    }

findByCondition方法在XXXmapper.xml中定义如下

<select id="findByCondition" resultMap="BaseResultMap"
        parameterType="map">
        SELECT
        <include refid="Base_Column_List" />
        FROM
        vm_info
        <choose>
            <when test="orderField !=null and orderField !=''">
                ORDER BY ${orderField}
                <if test="orderDirection != null and orderDirection != ''">${orderDirection}</if>
            </when>
        </choose>
    </select>

对应的jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<form id="pagerForm" method="post" action="<c:url value="vm/list"/>">
    <input type="hidden" name="status" value="${vo.status}"> <input
        type="hidden" name="keywords" value="${vo.keywords}" /> <input
        type="hidden" name="pageNum" value="${vo.pageNum}" /> <input
        type="hidden" name="pageSize" value="${vo.pageSize}" /> <input
        type="hidden" name="orderField" value="${vo.orderField}" />
</form>
<div layoutH="25">
    <div class="panelBar">
        <ul class="toolBar">
            <li><a class="add" href="<c:url value="vm/toAdd"/>"
                rel="serverCertMgmt_importCert" mask="true" target="dialog"
                width="600" height="500"><span>添加</span>
            </a>
            </li>
            <li><a class="edit"
                href="<c:url value="vm/toModify/{XXX}"/>"
                mask="true" target="dialog" width="600" height="400"><span>修改</span>
            </a>
            </li>
            <li><a class="delete"
                href="<c:url value="vm/delete/{XXX}"/>"
                target="ajaxTodo" title="确定要删除吗?"><span>删除</span>
            </a>
            </li>
            <li class="line">line</li>
        </ul>
    </div>
    <div class="pageContent">
        <table class="list" width="100%">
            <thead>
                <tr align="center">
                    <th width="10%" align="center">名称</th>
                    <th width="15%" align="center">ip</th>
                    <th width="15%" align="center">子网掩码</th>
                    <th width="15%" align="center">网关</th>
                    <th width="15%" align="center">状态</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <div class="pagination" targetType="navTab"
            totalCount="${vo.totalCount}" numPerPage="${vo.pageSize}"
            pageNumShown="10" currentPage="${vo.pageNum}"></div>
</div>

我们还可以修改每页显示行数

<select class="combox" name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value})">
    <option value="20">20</option>
    <option value="50">50</option>
    <option value="100">100</option>
    <option value="200">200</option>
</select>