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

不足：并未编写导出功能

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代码：

 //页面加载进行赋值
        window.onload = function page_init(){
        $("#total_count").val("${total_count}");
    } 
    
    //ZUI分页器
    $('#myPager').pager({
        menuDirection: "dropup",
        onPageChange: function(state, oldState) {
            //alert(state.page+"/"+oldState.page);
            //alert(state.recPerPage+"/"+oldState.recPerPage); 
            //当页码或者每页项目数发生改变时
            if (((state.page != oldState.page) || (oldState.recPerPage != state.recPerPage)) && oldState.page != void(0) && oldState.recPerPage != void(0)) {
                        //给页码，每页项数赋值
                $("#PAGE").val(state.page);
                $("#RECPERPAGE").val(state.recPerPage);
                var myPager = $('#myPager').data('zui.pager');
                var page = parseInt(state.page);
                var recperpage = parseInt(state.recPerPage);
                //alert("//"+page+"///"+recperpage);
                myPager.set(page, null, recperpage);
                console.log('页码从', oldState.page, '变更为', state.page);
                document.forms[0].submit();
            }
        },
        elementCreator: function(element, $pager, state) { //导出的方法（下方的方法可放于XX.js中，导出需要自己去实现）
            if (element === 'export_exel_button') {
                return $("<input type=\"button\" value=\"导出\" onclick=\"toExcel();\" onblur=\"resetForm();\" class=\"btn\">");
            }
            return false;
        }
    });        

JAVA代码：

//短信列表
    @RequestMapping(value = "/SMSLogList.cwai")
    public String SMSLogXq(Model model,String time,String total_count,HttpServletRequest request) throws IOException {
        //获取参数
        String PAGE = request.getParameter("PAGE");//页码
        String RECPERPAGE = request.getParameter("RECPERPAGE");//每页项目数
                //总数是从父页面传递的参数
        if(total_count == null || "".equals(total_count)) {
            total_count = request.getParameter("total_count");
        }
        //获取当前登陆用户信息
        HttpSession session=request.getSession();
        User loginuser=(User) session.getAttribute("LoginUser");
        BmUser user = userservice.selectByUserName(loginuser.getUsername());
        String userId = user.getUserid();
        
                //设置默认值
        if("".equals(PAGE) || PAGE == null){
            PAGE = "1";//显示首页
            RECPERPAGE = "10";//每页10项
        }
        
        List<Map> dxmsgloglist = dxmessageservice.selectDxMessageLogAllByTimePager(userId,PAGE,RECPERPAGE);//根据用户ID，页码，每页项数目进行查询
        model.addAttribute("dxmsgloglist", dxmsgloglist);
        model.addAttribute("total_count", total_count);
        model.addAttribute("PAGE", PAGE);
        model.addAttribute("RECPERPAGE", RECPERPAGE);
        return "/home/SMSLogList";
    }

 

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

ZUI - 开源HTML5跨屏框架

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