jquery写的分页组件

 基于jquery的分页组件

         这种组件网上有很多，试过各种插件，用起来总有不爽的地方，所以闲时自己写了个，用于学习，如果用在项目上，可能还需要完善下，使用方法如下：

 

         1.引入jquery库文件

          2 引入page.js

          3 引入page.css

          分页条的样式可以在page.css里设置，我在里面用css3写了简单的样式，谷歌chrome浏览器下运行效果图如下：

   目前ie不支持css3的效果渲染，so ，ie下效果会不一样，如果项目在ie中运行，修改page.css文件即可

    page. js代码如下：

/**
	 pageTool v1.0
 	 Copyright (c) 2012 jqx128 http://write.blog.csdn.net
 	 Date：2012-07-23
 	 config 配置选项 参数说明：
	 	 pageSize：总记录 
	 	 limit：每页记录数
	  	 pageNumLength：分页数字长度 
	 	 showPageNum：是否显示分页数字 
	 	 query：查询函数
	     refresh:是否刷新分页 true 是 false否
 */
(function($) {
	$.fn.extend({
		page : function(config) {
				config = $.extend({
					//默认配置
					pageNumLength:4,
					showPageNum: true,
					limit: 10,
					refresh:false,
					query:function(start,limit){
						alert('未指定查询函数');
					}
				},config||{});
				var temp = this;
				temp.attr('paged','true');
					//初始化
						var query ;		
						if (config.query != null
								&& typeof (config.query) != "undefined") {
							query = config.query;	
						}
						this.pageNumLength;
						// 是否显示分页数字
						this.showPageNum = true;
						if (config.showPageNum != null
								&& typeof (config.showPageNum) != "undefined") {
							temp.showPageNum = config.showPageNum;
						}
						if (config.pageNumLength != null
								&& typeof (config.pageNumLength) != "undefined") {
							temp.pageNumLength = config.pageNumLength * 1 - 1;
						}
						//是否有刷新的分页
						temp.refresh ;
						if (config.refresh != null
								&& typeof (config.refresh) != "undefined") {
							temp.refresh = config.refresh;
						}
						// 总记录数
						this.pageSize = 0;
						if (config.pageSize != null && typeof (config.pageSize) != "undefined") {
							temp.pageSize = config.pageSize;
						}
						// 分页开始位置
						this.start = 0;
						if (config.start != null && typeof (config.start) != "undefined") {
							temp.start = config.start;
						}
						// 每页记录数
						this.limit;
						if (config.limit != null && typeof (config.limit) != "undefined") {
							temp.limit = config.limit;
						}
						// 当前页
						this.currentPage = 1;
						// 总页数
						this.pageCount = parseInt((temp.pageSize*1 + temp.limit*1 - 1) / temp.limit*1);
					
						// 分页条对象数组
						this.pageBar = [];
					
						this.render = function() {
							temp.pageBar = [];
							var firstPage = "<input type='button' class='pageBtn'  name= 'firstPage' value='首    页'/>";
							var prePage = "<input type='button' class='pageBtn'  name='prePage' value='上一页'/>";
							var turnPage = "<input type='text' class='turnPage' value='"
									+ temp.currentPage + "' name='turnPage' />/"
									+ temp.pageCount + "页 " + temp.pageSize + "条记录";
							var lastPage = "<input type='button' class='pageBtn' name='lastPage'  value='尾    页'/>";
							var nextPage = "<input type='button' class='pageBtn' name='nextPage'  value='下一页'/>";
							temp.pageBar.push(firstPage + prePage);
							temp.pageBar.push("<b name='pageNums' ></b>");
							temp.pageBar.push(nextPage + lastPage + turnPage);
					
							temp.html(
									"<div  name='hasRecord' class='page'>"
											+ temp.pageBar.join("") + "</div><div  name='noRecord' class='msg'>无记录</div>");
							temp.find("input[name='prePage']").click(function() {
								if (temp.currentPage != 1) {
									temp.queryData(temp.currentPage * 1 - 1);
								}
							});
							temp.find("input[name='nextPage']").click(function() {
								if (temp.currentPage != temp.pageCount) {
									temp.queryData(temp.currentPage * 1 + 1);
								}
							});
							temp.find("input[name='firstPage']").click(function() {
								if (temp.currentPage != 1) {
									temp.queryData(1);
								}
							});
							temp.find("input[name='lastPage']").click(function() {
								if (temp.currentPage != temp.pageCount) {
									temp.queryData(temp.pageCount);
								}
							});
							temp.find("input[name='prePage']").css('class', 'disabled');
							temp.find("input[name='firstPage']").css('class', 'disabled');
							// 跳转输入框回车事件
							temp.find("input[name='turnPage']").keydown(function(event) {
								if (event.keyCode == 13) {
									var turnIndex =temp.find("input[name='turnPage']").val();
									if (turnIndex > 0 && turnIndex <= temp.pageCount) {
										temp.queryData(parseInt(turnIndex));
										temp.find("input[name='turnPage']").blur();
									}
								}
							});
					
							if (temp.pageSize == 0) {// 判断是否有记录
								temp.find("div[name='hasRecord']").hide();
								temp.find("div[name='noRecord']").show();
							} else {
								temp.find("div[name='hasRecord']").show();
								temp.find("div[name='noRecord']").hide();
								temp.genericPageNum();
							}
						}
						
						/**
						 * 查询数据 startIndex：页数
						 */
						this.queryData = function(startIndex) {
							if(temp.refresh){//是否刷新
								var isContinue = temp.setPageSize(temp.attr('pageSize'));
								if(isContinue){
									temp.exeQuery(startIndex);
								}
							}else{
								temp.exeQuery(startIndex);
							}
						}
						this.exeQuery = function(startIndex){
							temp.currentPage = startIndex;
									// 当前页是第一页，禁用“首页”、“上一页”；
									if (temp.currentPage == 1) {
										temp.find("input[name='prePage']").attr('class', 'disabled');
										temp.find("input[name='firstPage']").attr('class', 'disabled');
									} else {
										temp.find("input[name='prePage']").attr('class', 'pageBtn');
										temp.find("input[name='firstPage']").attr('class', 'pageBtn');
									}
									// 当前页是最后一页，禁用“尾页”、“下一页”
									if (temp.currentPage == temp.pageCount) {
										temp.find("input[name='nextPage']").attr('class', 'disabled');
										temp.find("input[name='lastPage']").attr('class', 'disabled');
									} else {
										temp.find("input[name='nextPage']").attr('class', 'pageBtn');
										temp.find("input[name='lastPage']").attr('class', 'pageBtn');
									}
									temp.find("input[name='turnPage']").val(temp.currentPage);
									query((startIndex - 1) * temp.limit, temp.limit);
									temp.genericPageNum();
						}
						// 初始化分页数字栏
						this.genericPageNum = function() {
							if (!temp.showPageNum) {
								return false;
							}
							var pageNums = [];
							var indexUp = parseInt(temp.currentPage) + temp.pageNumLength * 1;
							var startIndex;
							// 判断分页数字循环起始点和结束点
					
							if (indexUp <= temp.pageCount) {// 分页数字最后一位小于总页数
								if (temp.currentPage == 1) {
									startIndex = 1;
									indexUp = parseInt(temp.currentPage) + temp.pageNumLength * 1;
								} else {// 分页数字排到页尾
									startIndex = temp.currentPage * 1 - 1;
									indexUp = parseInt(temp.currentPage)
											+ (temp.pageNumLength * 1 - 1);
								}
							} else {
								if (temp.currentPage == 1) {
									startIndex = 1;
									indexUp = temp.pageCount;
								} else {
									startIndex = temp.currentPage * 1 - 1;
									indexUp = temp.pageCount;
								}
							}
							for ( var i = startIndex; i <= indexUp; i++) {
								var chooseClass = 'notChoosed';
								if (i == temp.currentPage) {// 当前选中页
									chooseClass = 'choosed';
								}
								if (i == indexUp) {
									if (indexUp != temp.pageCount) {
										pageNums.push("<a name='pageNum' class='"
												+ chooseClass + "' value='" + i + "' index='end'>["
												+ i + "]</a>");
									} else {// 最后一页
										pageNums.push("<a name='pageNum' class='"
												+ chooseClass + "' value='" + i
												+ "' index='last'>[" + i + "]</a>");
									}
								} else if (i == temp.currentPage) {
									pageNums.push("<a name='pageNum' class='"
											+ chooseClass + "' value='" + i + "' index='first'>["
											+ i + "]</a>");
								} else {
									pageNums.push("<a name='pageNum' class='"
											+ chooseClass + "' value='" + i + "' index=''>[" + i
											+ "]</a>");
								}
							}
					
							temp.find("b[name='pageNums']").html(pageNums.join(""));
					
							// 分页数字点击事件
							temp.find("a[name='pageNum']").unbind('click').bind(
									'click',
									function() {
										$("a[name='pageNum']").attr('class',
												'notChoosed');
										$(this).attr('class', 'choosed');
										temp.queryData($(this).attr('value'));
									});
						}
					
						// 变量get、set方法
						temp.setPageSize = function(data) {
							// 查询页数与之前不一致，重新初始化分页条（数据库记录更改）
							if (temp.pageSize != data) {
								this.pageSize = data;
								this.pageCount = parseInt((this.pageSize*1 + this.limit*1 - 1)
										/ this.limit*1);
								this.render();
								this.queryData(1);
								return false;
							}else{
								return true;
							}
						}
						
						this.getPageSize = function() {
							return this.pageSize;
						}
						this.setLimit = function(v) {
							this.limit = v;
						}
						this.getLimit = function() {
							return this.limit;
						}
						this.render();
		}
	})
})(jQuery);
	

 

 page.css

.pageBtn{
	background-color:#005757;
	color:#fff;
	font-size:12px;
	margin:0 3px 0 3px;
	cursor:pointer;
	border-radius: 15px 5px; 
}
.disabled{
	background-color:#d0d0d0;
	color:#FCFCFC;
	font-size:12px;
	margin:0 3px 0 3px;
	cursor:pointer;
	border-radius: 15px 5px; 
}
.turnPage{
	display:left;
	width:20px;
	height:10px;
	font-size:12px;
	text-align:center;
}
.page{
	font-size:12px;
	display:block;
}
.msg{
	font-size:12px;
	margin:0 5px 0 5px;
	text-align:center;
}
.choosed{
	margin:0 2px 0 2px;
}
.notChoosed{
	cursor:pointer;
	background-color:#005757;
	color:#fff;
	margin:0 2px 0 2px;
}

demo.html:

	
	<!DOCTYPE HTML>
<html lang="en">
	<head>
		<title>pageTest.html</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css" href="page.css">
		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript" src="page.js"></script>
		<script type="text/javascript">
    	var pageSize;
	var list;
	var limit = 10;
	function query(start, limit) {//你的查询函数
		$.ajax({
			url:'',
			type:'post',
			success:function(msg){//查询返回后设置分页总条数
				$("#pageBar").attr('pageSize',msg.pageSize);
				if($("#pageBar").attr('paged')==null){
					$("#pageBar").page({
							pageSize:pageSize,
							refresh:true,
							query:query
						});
				}
			}
		});
	}
	
	
		
    </script>
	</head>
	<body>
		<div id="pageBar"></div>
	</body>
</html>