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;
}
});
JSCode
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";
}
Java Code
对于其他属性的使用与说明,可进入
ZUI - 开源HTML5跨屏框架
进行查看,URL:http://zui.sexy/#javascript/pagerjs
ZUI分页器的使用案例(ECLIPSE SMS项目)的更多相关文章
- eclipse maven项目错误
eclipse maven项目错误:Failure to transfer org.codehaus.plexus:plexus-interpolation:jar:1.15 from http:// ...
- 用eclipse做项目中常遇到的问题-如何创建并读取properties文件
在用eclipse做项目开发的时候我们常常会将一些重要的内容写在配置文件里面, 特别是连接数据库的url,username,password等信息,我们常常会新建一个properties文件将所有信息 ...
- eclipse java项目中明明引入了jar包 为什么项目启动的时候不能找到jar包 项目中已经 引入了 com.branchitech.app 包 ,但时tomcat启动的时候还是报错? java.lang.ClassNotFoundException: com.branchitech.app.startup.AppStartupContextListener java.lang.ClassN
eclipse java项目中明明引入了jar包 为什么项目启动的时候不能找到jar包 项目中已经 引入了 com.branchitech.app 包 ,但时tomcat启动的时候还是报错?java. ...
- Eclipse 关联项目的源码
Eclipse 关联项目的源码 1.jdk源码的关联: 一般jdk自带的类,显示其源码的方式: 用jdk自带的src.zip吧:我的JDK目录是:D:\Java\jdk1.6.0_10 , JRE目录 ...
- android Eclipse执行项目提示错误: unable to execute dex: GC orerhead limit exceeded
Eclipse执行项目提示错误: unable to execute dex: GC orerhead limit exceeded 解决方法: 找到Eclipse安装目录的文件,\eclipse\e ...
- 【转】Eclipse里项目名有红叉,但是展开后里面又没有红叉叉
Eclipse里项目名有红叉,但是下面的每一个文件都没有红叉 有三种可能: 1:classpath有问题 2:编译级别有问题 3:jar包有问题,我碰过从maven上获取了问题jar包,工程里提示能找 ...
- eclipse web项目转maven项目
ps:好久没写博客了,工作了人就懒了,加油加油,up,up 1 eclipse web项目目录 /web app src com.xx.xx *.properties *.xml WebRoot W ...
- [eclipse]改项目名称后tomcat连接问题解决方法
背景:在我们使用eclipse进行项目开发时,有时候会需要修改项目名称,当改动项目名称后发现tomcat启动访问出现问题,使用新的项目名称不可行,使用旧的项目名称却可以.修改web.xml里面的dis ...
- eclipse发布项目时,会自动还原server.xml和content.xml文件
因为Tomcat的端口冲突,导致eclipse发布项目时,失败.于是到server.xml文件中修改端口,重启使用eclipse发布项目,发现依然报端口冲突的错误,其原因时,刚才对server.xml ...
随机推荐
- The Beam Model:Stream & Tables翻译(上)
作者:周思华 欢迎访问网易云社区,了解更多网易技术产品运营经验. 本文尝试描述Beam模型和Stream & Table理论间的关系(前者描述于数据流模型论文.the-world-beyond ...
- Android学习之ViewPager
1.定义 ViewPager是android扩展包v4包中的类,这个类可以让用户左右切换当前的view.其中,android.support.v4是谷歌公司为了解决当前版本碎片化的问题,从而提供的一 ...
- Code Chef JUMP(递推+树状数组+李超线段树)
\(JUMP\) 很容易写出转移柿子 \[f_i=\min_{p_j<p_i}\{(h_i-h_j)^2+f_j\}+w_i\] 把\(\min\)里面的东西展开一下 \[f_j=\min_{p ...
- jquery, jquery-ui, requirejs, bootstrap 的关系理解
jquery 是 基于 javascript 的一个语法衍生,更方便操作dom, 事件,css 整体来说更好用,更简洁. jquery-ui 是基于 jquery 实现的各种更好看,交互更友好的的界面 ...
- centos7在分区上建立文件系统和挂载
在上一篇博客中,我们只说了硬盘的分区,既然进行分区,那么我们就要知道如何使用这些分区,就是接下来的建立文件系统和挂载. mkfs(make filesystem)格式化,建立文件系统 可以看到各种文件 ...
- 首次进入页面的时候用js刷新页面
window.onload = function(){ var url=document.location.href; //获取浏览器访问栏里的地址 if( url.indexOf("tim ...
- 【OpenCV3】threshold()函数详解
threshold()函数源码 double cv::threshold( InputArray _src, OutputArray _dst, double thresh, double maxva ...
- 【xsy2111】 【CODECHEF】Chef and Churus 分块+树状数组
题目大意:给你一个长度为$n$的数列$a_i$,定义$f_i=\sum_{j=l_i}^{r_i} num_j$. 有$m$个操作: 操作1:询问一个区间$l,r$请你求出$\sum_{i=l}^{r ...
- 【xsy1214】 异或路径(xorpath) 点分治+可持久化trie
题目大意:给你一棵$n$个点的树,每个点有一个点权$x$,问你所有路径中点权异或和最大的路径的异或和 数据范围:$n≤30000$,$x≤2^{31}-1$. 如果是边上有点权的话非常简单,直接一个$ ...
- (转)http://blog.csdn.net/renfufei/article/details/38474435
原文:http://blog.csdn.net/renfufei/article/details/38474435