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>:&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:{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();