首页 > 代码库 > myPagination5.0 分页简单实例
myPagination5.0 分页简单实例
记得最开始做分页采用的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 onl oadPaging(){
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 = http://www.mamicode.com/"historyData/meterdata_content?terID="+$("#terID").val()+"&ter_No="+$("#ter_No").val()+>
后台通过相关逻辑处理，关键代码如下：
dataETCValues=query.setFirstResult((currpage-1)*pagenumber).setMaxResults(pagenumber).getResultList();
myPagination5.0 分页简单实例