码迷,mamicode.com
首页 > 系统相关 > 详细

ZUI分页器的使用案例(ECLIPSE SMS项目)

时间:2018-08-08 13:45:05      阅读:353      评论:0      收藏:0      [点我收藏+]

标签:script   play   inpu   data   public   ext   框架   列表   ret   

不足:并未编写导出功能

HTML代码:

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

。。。

<ul id="myPager" class="pager" data-ride="pager" data-rec-per-page="${RECPERPAGE}" data-page="${PAGE}" data-rec-total="${total_count}" data-max-nav-count="4" data-elements="first_icon,prev_icon,nav,next_icon,last_icon,size_menu,goto,total_text"></ul>
<input type="hidden" id="PAGE" name="PAGE" value="">
<input type="hidden" id="RECPERPAGE" name="RECPERPAGE" value="">
<input type="hidden" id="total_count" name="total_count" value="">

。。。

</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

JAVA代码:

技术分享图片
 1 //短信列表
 2     @RequestMapping(value = "/SMSLogList.cwai")
 3     public String SMSLogXq(Model model,String time,String total_count,HttpServletRequest request) throws IOException {
 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<Map> 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

 

对于其他属性的使用与说明,可进入

ZUI - 开源HTML5跨屏框架

进行查看,URL:http://zui.sexy/#javascript/pagerjs

 

ZUI分页器的使用案例(ECLIPSE SMS项目)

标签:script   play   inpu   data   public   ext   框架   列表   ret   

原文地址:https://www.cnblogs.com/Stir-friedEggplant/p/9441787.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!