大家好，又见面了，我是全栈君。
记得最開始做分页採用的ThreadLocal对象，后面发现有有了更简便的方法，直接使用插件，不但简单。并且高效！
採用的版本号为myPagination5.0，可以解决client多条件无刷新动态分页的问题。提供了较好的体验效果，功能强大。使用简单，方便快捷。轻松上手。
先上效果图：
首先来略微介绍下其參数类表：
參数配置列表：
|
參数名 |
数据类型 |
描写叙述信息 |
|
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。如需与server进行交互，需配置成 true |
|
callback |
string |
回调函数，纯字符串不带括号，需在 Javascript 脚本中 配置 一个 与 该字符串同样名字的方法，并带有參数，如：function demo6CallBack(data){} 等 |
|
url |
string |
Ajax 请求的地址。与动态脚本语言无关。可訪问 Jsp,PhP,CGI,Asp等等 |
|
dataType |
string |
从server返回的数据类型，插件依据server返回的类型来进行处理后返回，支持 Html Json Xml |
|
pageContId |
string |
自己定义该Id。依据该 Id 从server中 获取 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();
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/115698.html原文链接：https://javaforall.net
