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 ...
随机推荐
- c#实现AOP
AOP:面向切面编程,通过预编译方式或运行期动态代理实现程序功能的中统一处理业务逻辑的一种技术,比较常见的场景是:日志记录,错误捕获.性能监控等 AOP详解:https://www.cnblogs.c ...
- c# 合并重叠时间段的算法
c# 合并重叠时间段的算法 一.采用非排序: 方案一: 使用递归算法,如不喜欢递归的伙伴们,可以使用whie代替. 1.文件:Extract_Chao.cs(核心) using System; usi ...
- ovs 下流表port 1进入,port 1出去
问题:ovs流量从in_port=1进入,然后从output:1出去,就是说,流量从哪个端口进来,然后从哪个端口出去 流表: ovs-ofctl add-flow br-int in_port=10, ...
- django orm 以列表作为筛选条件进行查询
在Django的orm中进行查询操作时,可以通过传入列表,列表内的元素为索引值,作为一个筛选条件来进行行查询 from .models import UserInfo user_obj = UserI ...
- jzoj5906
我們首先發現,每一條邊都至少走1次,因為我們必須走到每一個節點按按鈕 如果我們不走一個節點,說明這個節點已經有傳送門了,但是必須走到這個節點開傳送門,矛盾 然後我們發現,每一條邊至多經過2次 如果我們 ...
- java-斐波那契数列的解法
public class Feibo { static long[] temp = new long[1000000]; static long fun1(int n){ if(temp[n]!=0) ...
- Elasticsearch系列(五)----JAVA客户端之TransportClient操作详解
Elasticsearch JAVA操作有三种客户端: 1.TransportClient 2.JestClient 3.RestClient 还有种是2.3中有的NodeClient,在5.5.1中 ...
- [Swift实际操作]七、常见概念-(9)使用定时组件Timer执行定时任务
本文将为你演示计时器的使用,使用计时器可以每隔一定时间执行某个函数. 在左侧的项目导航区,打开视图控制器的代码文件:ViewController.swift现在开始编写代码,实现任务定时的功能.定义一 ...
- Jmeter修改自身启动IP
先说一下问题,控制机访问压力机都是可以的,但是压力机访问控制机就不行了报:2019/04/13 16:05:49 ERROR - jmeter.samplers.RemoteTestListenerW ...
- Sip协议
会话初始协议.SIP是IETF标准进程的一部分,它是在诸如SMTP(简单邮件传送协议)和HTTP(超文本传送协议)基础之上建立起来的(请求应答的通讯模式).微信采用了自主研发的SYNC协议,他通过“握 ...