ZUI分页器的使用案例（ECLIPSE SMS项目）

不足：并未编写导出功能

HTML代码：

<form action="${basePath}/SMSLogList.cwai" method="post" >

。。。

<ul >

。。。

</form>

注释：PAGE，指代页码；RECPERPAGE，指代每页多少项数据；total_count，指代总共多少条数据

jQuery代码：

 1  //页面加载进行赋值
 2         window.onload = function page_init(){
 3         $("#total_count").val("${total_count}");
 4     } 
 5     
 6     //ZUI分页器
 7     $('#myPager').pager({
 8         menuDirection: "dropup",
 9         onPageChange: function(state, oldState) {
10             //alert(state.page+"/"+oldState.page);
11             //alert(state.recPerPage+"/"+oldState.recPerPage); 
12             //当页码或者每页项目数发生改变时
13             if (((state.page != oldState.page) || (oldState.recPerPage != state.recPerPage)) && oldState.page != void(0) && oldState.recPerPage != void(0)) {
14                         //给页码，每页项数赋值
15                 $("#PAGE").val(state.page);
16                 $("#RECPERPAGE").val(state.recPerPage);
17                 var myPager = $('#myPager').data('zui.pager');
18                 var page = parseInt(state.page);
19                 var recperpage = parseInt(state.recPerPage);
20                 //alert("//"+page+"///"+recperpage);
21                 myPager.set(page, null, recperpage);
22                 console.log('页码从', oldState.page, '变更为', state.page);
23                 document.forms[0].submit();
24             }
25         },
26         elementCreator: function(element, $pager, state) { //导出的方法（下方的方法可放于XX.js中，导出需要自己去实现）
27             if (element === 'export_exel_button') {
28                 return $("<input type=\"button\" value=\"导出\" onclick=\"toExcel();\" onblur=\"resetForm();\" class=\"btn\">");
29             }
30             return false;
31         }
32     });        

JSCode