JQuery插件——通用分页组件

       在实际项目开发中，通用的分页组件是必不可少的。下面描述的是关于JavaScript版的分页组件。该组件是基于jquery之上开发的。

       该组件包括

       jquery-1.3.2.min.js; (jquery 核心类库)

       jquery.pager.js; (分页组件类库)

       PagerDemo.js; (用于js与html分离)

       Pager.css ;

       PagerDemo.html

 

运行效果图如下：

     
   图一、运行效果图

 

具体实现代码：

jquery.pager.js

 

(function($) {   
	$.fn.pager = function(options) {
		var opts = $.extend({}, $.fn.pager.defaults, options);  
		return this.each(function() {       
			$(this).empty().append(renderpager(parseInt(options.pagenumber), parseInt(options.pagecount), options.buttonClickCallback));                       
			$('.pages li').mouseover(function() { document.body.style.cursor = "pointer"; }).mouseout(function() { document.body.style.cursor = "auto";});  
		});
	};   
	
	function renderpager(pagenumber, pagecount, buttonClickCallback) {         
		var $pager = $('<ul class="pages"></ul>');       
		$pager.append(renderButton('首页', pagenumber, pagecount, buttonClickCallback)).append(renderButton('上一页', pagenumber, pagecount, buttonClickCallback));       
		var startPoint = 1; 
		var endPoint = 9;
		var thpoint="<li class='thpoint'>...</li>";
		if (pagenumber > 4) {
			startPoint = pagenumber - 4;
			endPoint = pagenumber + 4;
		}
		if (endPoint > pagecount) {
			startPoint = pagecount - 8;
			endPoint = pagecount;
			thpoint = "";
		}
		if (startPoint < 1) {
			startPoint = 1;
		}        
		for (var page = startPoint; page <= endPoint; page++) {
			var currentButton = $('<li class="page-number">' + (page) + '</li>');
			page == pagenumber ? currentButton.addClass('pgCurrent') : currentButton.click(function() {
				buttonClickCallback(this.firstChild.data);
			});
			currentButton.appendTo($pager);
		}       
		$pager.append(thpoint).append(renderButton('下一页', pagenumber, pagecount, buttonClickCallback)).append(renderButton('末页', pagenumber, pagecount, buttonClickCallback));
		$pager.append("<li class='thpoint' style='margin-top:3px;'>共: "+pagecount+" 页</li>");
		var strgoto = $("<li class='thpoint'>当前<input type='text' value='"+pagenumber+"'maxlength='6' id='gotoval' style='width:20px; height:16px;margin-top:-3px;padding-top:2px;padding-left:10px;'/>页</li>");
		$pager.append(strgoto);
		$pager.append(changepage('go',pagecount,buttonClickCallback));
		return $pager;
}    
function changepage(buttonLabel,pagecount,buttonClickCallback){
	var $btngoto = $('<li class="pgNext">'+ buttonLabel+'</li>');
	$btngoto.click(function() {
		var gotoval = $('#gotoval').val();
		var patrn = /^[1-9]{1,20}$/;
		if (!patrn.exec(gotoval)){
			alert("请输入非零的正整数！");
			return false;
		}
		var intval = parseInt(gotoval);
		if(intval > pagecount){
			alert("您输入的页面超过总页数 "+pagecount);
			return ;
		}
		buttonClickCallback(intval);
	});
	return $btngoto;
}

function renderButton(buttonLabel, pagenumber, pagecount, buttonClickCallback) {     
	var $Button = $('<li class="pgNext">' + buttonLabel + '</li>');   
	var destPage = 1;       
	switch (buttonLabel) {
		case "首页":
			destPage = 1;
			break;
		case "上一页":   
			destPage = pagenumber - 1;
			break;
		case "下一页":
			destPage = pagenumber + 1;          
		break;
		case "末页":
			destPage = pagecount;        
		break;     
	}            
	if (buttonLabel == "首页" || buttonLabel == "上一页") {     
		pagenumber <= 1 ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); });     
	}       
	else {     
		pagenumber >= pagecount ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); }); 
	}     
	return $Button;  
 }    

 $.fn.pager.defaults = {   
	 pagenumber: 1,     
	 pagecount: 1};
 })(jQuery);

  

 PagerDemo.js

 

$(document).ready(function() {
	init(1);
});

//默认加载
function init(pagenumber){
	//向服务器发送请求，查询满足条件的记录
	//$.getJSON('',{},function(data){
        //data 为返回json 对象 并包括(pagecount、totalcount)的key-value值;
		var data = {'pagecount':15,'totalcount':150};
		$("#pager").pager({ pagenumber: pagenumber, pagecount:data.pagecount,totalcount:data.totalcount, buttonClickCallback: PageClick});
	//});
}

//回调函数
PageClick = function(pageclickednumber) {
	init(pageclickednumber);
	$("#result").html("Clicked Page " + pageclickednumber);
}

 

Pager.css

 

/* jquery.page.js css  */
ul.pages {display:block;border:none;text-transform:uppercase;font-size:12px;margin:10px 0 50px;padding:0;}
ul.pages li {list-style:none;float:left;border:1px solid #b36d41;text-decoration:none;margin:0 5px 0 0;padding:5px;}
ul.pages li:hover {border:1px solid #afdfe4;background-color:#afdfe4;}
ul.pages li.pgEmpty {border:1px solid #f0f0f0;color:#d9d6c3;background-color:#f0f0f0;}
ul.pages li.thpoint {border:none;cursor:auto; color:#000;background-color:#fff;}
ul.pages li.pgCurrent {padding: 4px 4px;border: 3px double #fff; + border-color: #afdfe4;color:#FFF;font-weight:700;background-color:#afdfe4;}

 

 

PagerDemo.html

         需要装载容器div

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>    
<title>jQuery.pager.js Test</title>   
<link href="Pager.css" rel="stylesheet" type="text/css" />   
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>  
<script src="jquery.pager.js" type="text/javascript"></script>  
<script src="PagerDemo.js" type="text/javascript"></script>
</head>
	<body>
	<h1 id="result">Click the pager below.</h1>
	<div id="pager" ></div>
	</body>
</html>

 

end...

评论

5 楼 比恩杨 2014-04-04  

[color=red][/color]

4 楼 lxm1247983646 2013-10-03  

怎样向服务器发送请求，查询满足条件的记录，以及把查到的对象显示出来？

3 楼 anyone 2013-01-26  

写的非常不错

2 楼 medicine 2012-08-23  

赞一个 

1 楼 ydw121 2012-02-08  

不错，参照一下