不足:并未编写导出功能
HTML代码:
。。。
。。。
注释: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 $("");29 }30 return false;31 }32 });
JSCode
JAVA代码:
1 //短信列表
2 @RequestMapping(value = "/SMSLogList.cwai")3 public String SMSLogXq(Model model,String time,String total_count,HttpServletRequest request) throwsIOException {4 //获取参数
5 String PAGE = request.getParameter("PAGE");//页码
6 String RECPERPAGE = request.getParameter("RECPERPAGE");//每页项目数7 //总数是从父页面传递的参数
8 if(total_count == null || "".equals(total_count)) {9 total_count = request.getParameter("total_count");10 }11 //获取当前登陆用户信息
12 HttpSession session=request.getSession();13 User loginuser=(User) session.getAttribute("LoginUser");14 BmUser user =userservice.selectByUserName(loginuser.getUsername());15 String userId =user.getUserid();16
17 //设置默认值
18 if("".equals(PAGE) || PAGE == null){19 PAGE = "1";//显示首页
20 RECPERPAGE = "10";//每页10项
21 }22
23 List dxmsgloglist = dxmessageservice.selectDxMessageLogAllByTimePager(userId,PAGE,RECPERPAGE);//根据用户ID,页码,每页项数目进行查询
24 model.addAttribute("dxmsgloglist", dxmsgloglist);25 model.addAttribute("total_count", total_count);26 model.addAttribute("PAGE", PAGE);27 model.addAttribute("RECPERPAGE", RECPERPAGE);28 return "/home/SMSLogList";29 }
Java Code
对于其他属性的使用与说明,可进入
进行查看,URL:http://zui.sexy/#javascript/pagerjs