大家好,又见面了,我是全栈君。
记得最開始做分页採用的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();
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/115698.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...