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: 当前是第几页

注意：

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