记得最开始做分页采用的ThreadLocal对象,后面发现有有了更简便的方法,直接使用插件,不但简单,而且高效!
采用的版本为myPagination5.0,能够解决客户端多条件无刷新动态分页的问题,提供了较好的体验效果,功能强大,使用简单,方便快捷,轻松上手。
先上效果图:
首先来稍微介绍下其参数类表:
参数配置列表:
参数名 |
数据类型 |
描述信息 |
currPage |
int |
当前页 |
pageCount |
int |
总页数 |
pageSize |
int |
页码数 |
cssStyle |
string |
样式,给与插件单独指定样式 |
info |
Object |
页码栏配置信息 |
ajax |
Object |
ajax 请求配置信息 |
info(Object) 参数列表
参数名 |
数据类型 |
描述信息 |
first |
string |
首页 |
last |
string |
尾页 |
prev |
string |
上一页 |
next |
string |
下一页 |
link |
string |
鼠标放在链接上显示的值,支持("#","javascript:void(0)")等 |
msg |
string |
信息栏,内容需包含在 Html 标签中 ,如 <span>: 我跳到{curr}/{sum}页</span>中间两个函数必须存在! |
first_on |
true,false |
首页是否显示,默认显示 |
last_on |
true,false |
尾页是否显示,默认显示 |
prev_on |
true,false |
上一页是否显示,默认显示 |
next_on |
true,false |
下一页是否显示,默认显示 |
msg_on |
true,false |
信息栏是否显示,默认显示 |
text |
Object |
文本框样式配置,可指定样式,如:text:{width:‘200px‘,color:‘#ff0‘} 等 |
axja(Object) 参数列表
参数名 |
数据类型 |
描述信息 |
on |
true,false |
Ajax 请求开启状态,默认 false ,如需与服务器进行交互,需配置成 true |
callback |
string |
回调函数,纯字符串不带括号,需在 Javascript 脚本中 配置 一个 与 该字符串相同名字的方法,并带有参数,如:function demo6CallBack(data){} 等 |
url |
string |
Ajax 请求的地址,与动态脚本语言无关,可访问 Jsp,PhP,CGI,Asp 等等 |
dataType |
string |
从服务器返回的数据类型,插件根据服务器返回的类型来进行处理后返回,支持 Html Json Xml |
pageContId |
string |
自定义该Id,根据该 Id 从服务器中 获取 PageCount 总页数 |
param |
Object |
Ajax 参数对象,进行 Ajax 请求时,可按照条件来查询分页,page 参数 必须存在 如:param:{on:true,page:1,arg1:‘1‘,arg2:‘2‘} 等等 |
ajaxStart |
function |
方法,用于配置 Ajax 请求之前的方法 |
javascript 函数如下:
function onLoadPaging(){ var allPage=$("#allPage").val(); //总页数 var firstpageval=$("#terID1").val(); //当前页 var pageNumber=$("#connetNumber").val();//页码数量 if(firstpageval==""||firstpageval==null||firstpageval==undefined){ firstpageval=1; } if(allPage==""||allPage==null||allPage==undefined){ allPage=1; } $("#demo1").myPagination({currPage:parseInt(firstpageval),pageCount:parseInt(allPage),pageNumber:parseInt(pageNumber),panel:{tipInfo_on:true,tipInfo_css:{width:"22px",height:'12px'}}, ajax:{on:false, onClick:function(page){ $("#terID1").val(page); location.href = "historyData/meterdata_content?terID="+$("#terID").val()+"&ter_No="+$("#ter_No").val()+ "&terID1="+$("#terID1").val()+"&allPage="+$("#allPage").val()+"&terID2="+$("#terID2").val()+"&meterNo="+$("#meterNo").val()+"&unitId="+$("#unitId").val()+"&begintime="+$("#beginTime").val()+"&dadtime="+$("#deadTime").val(); // $("#meterForm").submit(); } }}); }
dataETCValues=query.setFirstResult((currpage-1)*pagenumber).setMaxResults(pagenumber).getResultList();
原文地址:http://blog.csdn.net/yuechang5/article/details/39938731