myPagination5.0 分页简单实例

记得最開始做分页採用的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>:&nbsp;&nbsp;&nbsp;我跳到{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:{'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:{"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();