dwz 分页实现过程
1.官方文档说明：
分页组件库
<div class="pagination" targetType="navTab" totalCount="200" numPerPage="20" pageNumShown="10" currentPage="1"></div>
开发人员只要用程序动态生成这个<div>, 不用写js, 框架自动绑定处理事件。
参数说明:
targetType: navTab或dialog，用来标记是navTab上的分页还是dialog上的分页
totalCount: 总条数
numPerPage: 每页显示多少条
pageNumShown: 页标数字多少个
currentPage: 当前是第几页
2.参数修改的介绍
官方文档只说明了基本的几个参数，可能不适合自己的系统，因此有时需要进行修改框架代码，修改如下：
1) dwz.ui.js 文档中需要修改264行，
$("div.pagination", $p).each(function(){
var $this = $(this);
$this.pagination({
targetType:$this.attr("targetType"),
rel:$this.attr("rel"),
totalCount:$this.attr("totalCount"),
numPerPage:$this.attr("numPerPage"),
pageNumShown:$this.attr("pageNumShown") || 10,
currentPage:$this.attr("currentPage"),
lastShow:$this.attr("lastShow") //这是我自己修改的一个参数，仅供参考
});
});
2) 参数的值获取以及使用
dwz.pagination.js 文档中修改的地方：
2-1) var Pagination = function(opts) {
this.opts = $.extend({
targetType:"navTab",// navTab, dialog
rel:"", //用于局部刷新div id号
totalCount:0,
numPerPage:10,
pageNumShown:10,
currentPage:1,
lastShow:1,//是否显示末页 1：显示 这是我测试的参数
callback:function(){return false;}
}, opts);
}
2-2) 获取dwz.ui.js中添加参数的值的地方
$.extend(Pagination.prototype, {
targetType:function(){return this.opts.targetType},
//省略其他参数的获取...
lastShow:function(){return this.opts.lastShow} //获取参数设置
});
本文档参数的应用就得自己使用了。
3) 分页代码的固定格式
dwz.frag.xml 文档定义了dwz框架的组件结构，其中分页的结构如下：
<!-- dwz.pagination -->
<_PAGE_ id="pagination"><![CDATA[
<ul>
<li class="j-first">
<a class="first" href="javascript:;"><span>首页</span></a>
<span class="first"><span>首页</span></span>
</li>
<li class="j-prev">
<a class="previous" href="javascript:;"><span>上一页</span></a>
<span class="previous"><span>上一页</span></span>
</li>
#pageNumFrag#
<li class="j-next">
<a class="next" href="javascript:;"><span>下一页</span></a>
<span class="next"><span>下一页</span></span>
</li>
<li class="j-last">
<a class="last" href="javascript:;"><span>末页</span></a>
<span class="last"><span>末页</span></span>
</li>
<li class="jumpto"><input class="textInput" type="text" size="4" value="#currentPage#" /><input class="goto" type="button" value="确定" /></li>
</ul>
]]></_PAGE_>
**本人建议不要修改，js中获取这些片段的代码 ：DWZ.frag["pagination"] 则获取的就是上述dom结构。
若需要修改，我们可以添加新的片段来进行改写。
4）点击分页重要的方法
点击分页栏的按钮事件定义如下：
function _bindEvent($target, pageNum, targetType, rel){
$target.bind("click", {pageNum:pageNum}, function(event){
dwzPageBreak({targetType:targetType, rel:rel, data:{pageNum:event.data.pageNum}});
event.preventDefault();
});
}
其中关键代码 dwzPageBreak (位于dwz.ajax.js中)
ps：若一个画面中存在多个分页组件，会导致存在冲突，解决办法：给每个分页table设置div的id属性。
如果通过js动态生成分页组件，则需要生成上述的dom结构，这样浏览器是不会解析为正常的格式，此时需要通过dwz的组件渲染方法initUI(),便可达到效果。
以上为小可的一点总结，希望可以帮到大家，也希望可以留言交流。