1 <form id="pagerForm" method="post" action="w_list.html">2     <input type="hidden" name="pageNum" value="1" />3     <input type="hidden" name="numPerPage" value="<%= Model.numPerPage %>" />4     <input type="hidden" name="orderField" value="<%= param.orderField %>" />5     <input type="hidden" name="orderDirection" value="<%= param.orderDirection %>" />6 </form>

 1 <div class="panelBar" > 2         <div class="pages"> 3             <span>显示</span> 4             <select name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value})"> 5                 <option value="20">20</option> 6                 <option value="50">50</option> 7                 <option value="100">100</option> 8                 <option value="200">200</option> 9             </select>10             <span>条，共200条</span>11         </div>12         13         <div class="pagination" targetType="navTab" totalCount="200" numPerPage="20" pageNumShown="10" currentPage="2"></div>14 15     </div>16 17 </div>

 1 /** 2  * 处理navTab中的分页和排序 3  * targetType: navTab 或 dialog 4  * rel: 可选 用于局部刷新div id号 5  * data: pagerForm参数 {pageNum:"n", numPerPage:"n", orderField:"xxx", orderDirection:""} 6  * callback: 加载完成回调函数 7  */ 8  9 function dwzPageBreak(options){10     var op = $.extend({ targetType:"navTab", rel:"", data:{pageNum:"", numPerPage:"", orderField:"", orderDirection:""}, callback:null}, options);　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　// 参数rel来自于上面第二段代码13行的一个可选属性，用于指定当一个页面内存在有多个表单时，分页操作作用的对象
11     var $parent = op.targetType == "dialog" ? $.pdialog.getCurrent() : navTab.getCurrentPanel(); 
　　　　　　　　　　　　　　　　　　　　// 获取到的 $parent 对象为包含 id=“pagerForm” 的 Form 表单12 13     if (op.rel) {14         var $box = $parent.find("#" + op.rel);15         var form = _getPagerForm($box, op.data);16         if (form) {17             $box.ajaxUrl({18                 type:"POST", url:$(form).attr("action"), data: $(form).serializeArray(), callback:function(){19                     $box.find("[layoutH]").layoutH();20                 }21             });22         }23     } else {24         var form = _getPagerForm($parent, op.data);25         var params = $(form).serializeArray();26         27         if (op.targetType == "dialog") {28             if (form) $.pdialog.reload($(form).attr("action"), {data: params, callback: op.callback});29         } else {30             if (form) navTab.reload($(form).attr("action"), {data: params, callback: op.callback});31         }32     }33 }

 1 /** 2  *  3  * @param {Object} args {pageNum:"",numPerPage:"",orderField:"",orderDirection:""} 4  * @param String formId 分页表单选择器，非必填项默认值是 "pagerForm" 5  */ 6 function _getPagerForm($parent, args) { 7     var form = $("#pagerForm", $parent).get(0); 8  9     if (form) {10         if (args["pageNum"]) form[DWZ.pageInfo.pageNum].value = http://www.mamicode.com/args["pageNum"];11         if (args["numPerPage"]) form[DWZ.pageInfo.numPerPage].value = http://www.mamicode.com/args["numPerPage"];12         if (args["orderField"]) form[DWZ.pageInfo.orderField].value = http://www.mamicode.com/args["orderField"];13         if (args["orderDirection"] && form[DWZ.pageInfo.orderDirection]) form[DWZ.pageInfo.orderDirection].value = http://www.mamicode.com/args["orderDirection"];14     }15     16     return form;17 }