jpaginate是基于jquery的分页插件,非常轻量,没有任何侵入性,当然所能做的也就非常少.事实上它的作用仅仅是提供一个好看的分页样式,只提供一个触发事件.但是轻量带来了巨大的灵活性,让它可以提供任何内容的分页服务.
官方网站为http://tympanus.net/codrops/2009/11/17/jpaginate-a-fancy-jquery-pagination-plugin/,demo网站为http://tympanus.net/jPaginate/.
该项目好像到2009年就已经没人再更新了,但是仍然兼容现在的所有浏览器(目前还没测过IE10).因其源文件中有一点小错误,导致可能在看demo时,IE6,7,9可能会出现排版混乱的情况.这个情况是因为其判断浏览器版本的方式不对,具体代码为:
-
var bVer = navigator.appVersion;
-
if(bVer.indexOf(‘MSIE 7.0‘) > 0)
-
var ver = "ie7";
将其换成
-
var isIE = $.browser.msie;
-
var bv = $.browser.version;
-
if(isIE && bv == ‘7.0‘)
-
var ver = "ie7";
就可以了.
在附件中,已经将其改正,并做了简单的汉化.
用法:
在JSP页面中为其定义一个DIV
-
<div id="pagination0">
-
-
</div>
然后引入jquery.paginate.js文件即可.本插件依赖jquery,本次用的是1.7.1
然后为其初始化:
-
$(function(){
-
$("#pagination0").paginate({
-
count : ${pageNum},
-
start : 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‘,
-
onChange : function(page){
-
list(page-1,pageSize);
-
//这里它使用的是函数,但本人不知道这个函数现在哪里,因为我写在哪里系统都报错,好在我不需要异步,直接通过window.loaction.href 跳转。直接传入pageNum即可。
-
}
-
});
-
list(0,pageSize);
-
});
上面的list 方法是自己写的异步取数据的方法,亲们可自己实现自己的代码.以下列出list代码,仅供参考,请结合各自业务来完成自己的功能.
//下面这个list函数,本人放在哪里都报错。不知道为什么?
-
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 等,我们自己可以根据需要,在其提供的样式表中做修改
分页插件汇总,布布扣,bubuko.com
分页插件汇总
原文:http://blog.csdn.net/baicp3/article/details/37911665