jpaginate是基于jquery的分页插件,非常轻量,没有任何侵入性,当然所能做的也就非常少.事实上它的作用仅仅是提供一个好看的分页样式,只提供一个触发事件.但是轻量带来了巨大的灵活性,让它可以提供任何内容的分页服务.
,demo网站为
http://tympanus.net/jPaginate/
.
该项目好像到2009年就已经没人再更新了,但是仍然兼容现在的所有浏览器(目前还没测过IE10).因其源文件中有一点小错误,导致可能在看demo时,IE6,7,9可能会出现排版混乱的情况.这个情况是因为其判断浏览器版本的方式不对,具体代码为:
Js代码
-
var
bVer = navigator.appVersion;
-
if
(bVer.indexOf(
‘MSIE 7.0’
) > 0)
-
var
ver =
“ie7”
;
将其换成
Js代码
-
var
isIE = $.browser.msie;
-
var
bv = $.browser.version;
-
if
(isIE && bv ==
‘7.0’
)
-
var
ver =
“ie7”
;
就可以了.
在附件中,已经将其改正,并做了简单的汉化.
用法:
在JSP页面中为其定义一个DIV
Html代码
-
<
div
id
=
“pagination0”
>
-
-
</
div
>
然后引入jquery.paginate.js文件即可.本插件依赖jquery,本次用的是1.7.1
然后为其初始化:
Js代码
-
var
pageSize = 10;
Js代码
-
$(
function
(){
-
$(
“#pagination0”
).paginate({
-
count : ${pageNum},
//此处要写清本次分页的总页数,不支持动态改变,不可写非int型数.个人建议在进入页面的时候就把页数传过来
-
start : 1,
//开始页码,从1开始,一般设置成1
//本人在这里设置为动态变化，这样页面的下标就能当前页，变为选中状态。
-
display : 7,
//在分页条上显示的个数,分页数等于或超过本设置会显示设置的个数,不够的话会显示真实个数,不过就不会出现滚动效果了.
-
border :
false
,
//是否显示外框
-
text_color :
‘#888’
,
//文字颜色
-
background_color :
‘#EEE’
,
//背景颜色
-
text_hover_color :
‘black’
,
//鼠标放上去时文字的颜色
-
background_hover_color :
‘#CFCFCF’
,
//鼠标放上去时背景的颜色
-
rotate :
true
,
//是否滚动
-
images :
false
,
//
-
mouse :
‘press’
,
//可选值为’press’和’slide’,具体差别请自己体验.
-
onChange :
function
(page){
//本插件唯一可触发的事件,在点击页数的时候触发,只传过来当前被选中的页数,我想这其实足够了.
-
list(page-1,pageSize);
-
//这里它使用的是函数，但本人不知道这个函数现在哪里，因为我写在哪里系统都报错，好在我不需要异步，直接通过window.loaction.href 跳转。直接传入pageNum即可。
-
}
-
});
-
list(0,pageSize);
-
});
上面的list 方法是自己写的异步取数据的方法,亲们可自己实现自己的代码.以下列出list代码,仅供参考,请结合各自业务来完成自己的功能.
//下面这个list函数，本人放在哪里都报错。不知道为什么？
Js代码
-
function
list(start, size){
-
$.ajax({
-
url:
“${ctx}/page.do?action=list”
,
-
type:
“post”
,
-
data:{start:start,size:size},
-
dataType:
“json”
,
-
timeout: 10000,
-
error:
function
(){alert(
‘请求超时，请稍候再试’
);},
-
success:
function
(result){
-
var
s =
new
StringBuffer();
-
$.each(result,
function
(index,value){
-
s.append(
“<tr>”
).append(
“<td>”
).append(value.NAME).append(
“</td>”
);
-
s.append(
“<td>”
).append(value.MONEY).append(
“</td>”
).append(
“<td>”
);
-
s.append(value.UNIT).append(
“</td>”
).append(
“<td>”
);
-
s.append(
“<a href=’#’ onclik=\”javascript:modify(‘”
).append(value.ID);
-
s.append(
“‘)\”>操作</a>”
).append(
“</td>”
).append(
“</tr>”
);
-
});
-
$(
“#mytbody”
).html(s.toString());
-
}
-
});
-
}
顺带说一下，默认的样式是 first last 等，我们自己可以根据需要，在其提供的样式表中做修改
版权声明：本文为baicp3原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。