jPaginate用法说明

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

然后为其初始化:

 

var pageSize = 10;

 

$(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);
									  }
			});
		list(0,pageSize);
	});

  上面的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());
			}
		});
	}

 

StringBuffer的代码

 

function StringBuffer(){
	this.__string__ = new Array();
}
StringBuffer.prototype.append = function(str){
	this.__string__.push(str);
	return this;
}
StringBuffer.prototype.toString = function(){
	return this.__string__.join("");
}