jQuery制作分页插件

最新推荐文章于 2025-06-28 10:48:29 发布

紫枫叶520

最新推荐文章于 2025-06-28 10:48:29 发布

阅读量471

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript和jQuery 文章标签： jquery 分页插件

本文链接：https://blog.youkuaiyun.com/zifengye520/article/details/52235795

javascript和jQuery 专栏收录该内容

16 篇文章

订阅专栏

一款自己用jQuery做的分页插件。

1、html页面部分

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>pageBar</title>

  <script src="jquery-3.1.0.min.js"></script>
  <script src="page.js"></script>
  <style>
	.bar{
		display:inline-block;
		line-height:22px;
		width:45px;
		border-radius:5px;
		border:2px solid #CA8EFF;
		margin-left:3px;
		text-align:center;
		font-size:15px;
		cursor:pointer;
	}

	.bar1{
		width:60px;
	}

	.bar2{
		background:#C4E1FF;
		cursor:text;
	}
	
	.left{
		margin-left:20px;
	}

	.ipt1{
		width:30px;
		margin:0 10px;
	}
	
	.line{
		border:1px solid gray;
	}
  </style>

	<script>
		$(function(){
			draw();
		});

		function draw(param){
			$("#pageBar").pageBar(param);
		}
		
		function confirm(){
			var currPage=$("#currPage").val();
			var param={currPage:currPage}
			draw(param);
		}
		
		function doSearch(currPage,pageSize){
			alert("查询第"+currPage+"页，每页"+pageSize+"条");
		}
	</script>

 </head>
 <body>
  
	<div id="pageBar" style="margin-top:100px;">
		
	</div>
	<div style="margin-top:50px;">
		<h3>模拟数据，测试分页功能</h3>
		<div class="line"></div>
		<table>
			<tr><td>数据总数：</td><td><input id="total" value="200" /></td></tr>
			<tr><td colspan="2"><input type="button" onclick="confirm();" value="确定" /></td></tr>
		</table>
	</div>

 </body>
</html>

2、jQuery插件部分

;(function($){
	$.fn.extend({
		pageBar:function(param){
			
			//先获得插件里面的值
			var total=$("#total").val();
			var pageSize=$("#pageSize").val()==null ? 10 : $("#pageSize").val();
			
			//然后清空分页内容
			$(this).empty();
			
			//最后重新绘制插件
			var maxPageCount=10;//最多显示是个页码按钮，超出部分中间用...显示

			options=$.extend({currPage:1},param);

			pageCount=Math.ceil(total/pageSize)==0 ? 1 : Math.ceil(total/pageSize);//total为0的时候，显示1页

			if(options.currPage>1){
				$(this).append($("<span>").addClass("bar").text("首页").on("click",function(){
					//查询
					var pageSize=$("#pageSize").val();
					doSearch(1,pageSize);
					//绘制分页
					$(this).parent().pageBar({currPage:1});
				}));
				$(this).append($("<span>").addClass("bar bar1").text("上一页").on("click",function(){
					var currPage=parseInt(options.currPage)-1;
					//查询
					var pageSize=$("#pageSize").val();
					doSearch(currPage,pageSize);
					//绘制分页
					$(this).parent().pageBar({currPage:currPage});
					
				}));
			}

			if(pageCount<=maxPageCount){//按钮数未超标
				for(var i=1;i<pageCount+1;i++){
					$(this).getBarByCurrPage(i,options.currPage);
				}
			}else{//超出最大按钮数
				if(options.currPage<9){//当前页在前面8个之中
					for(var i=1;i<9;i++){
						$(this).getBarByCurrPage(i,options.currPage);
					}
					$(this).append("...");
					$(this).getBarByCurrPage(pageCount,options.currPage);
				}else if(options.currPage>pageCount-8){//当前页在最后8个之中
					$(this).getBarByCurrPage(1,options.currPage);
					$(this).append("...");
					for(var i=pageCount-7;i<=pageCount;i++){
						$(this).getBarByCurrPage(i,options.currPage);
					}
				}else{//显示首页和尾页，中间显示包含当前页在内的7个，前后用...代替
					$(this).getBarByCurrPage(1,options.currPage);
					$(this).append("...");
					for(var i=options.currPage-3;i<=options.currPage+3;i++){
						$(this).getBarByCurrPage(i,options.currPage);
					}
					$(this).append("...");
					$(this).getBarByCurrPage(pageCount,options.currPage);
				}
			}

			if(options.currPage<pageCount){
				$(this).append($("<span>").addClass("bar bar1").text("下一页").on("click",function(){
					var currPage=parseInt(options.currPage)+1;
					//查询
					var pageSize=$("#pageSize").val();
					doSearch(currPage,pageSize);
					//绘制分页
					$(this).parent().pageBar({currPage:currPage});
				}));
				$(this).append($("<span>").addClass("bar").text("尾页").on("click",function(){
					//查询
					var pageSize=$("#pageSize").val();
					doSearch(pageCount,pageSize);
					//绘制分页
					$(this).parent().pageBar({currPage:pageCount});
				}));
			}
			
			$(this).append($("<span>").text("每页显示").addClass("ipt1"))
			.append($("<select name='pageSize' id='pageSize'>").append($("<option>").val(10).text(10))
				.append($("<option>").val(20).text(20))
				.append($("<option>").val(30).text(30))
			)
			.append($("<span>").text("页"));	
			
			$("#pageSize").val(pageSize);//根据用户选择每页显示的数量，来选中pageSize的值
			
			$(this).append($("<span>").text("跳转到").addClass("left"))
				.append($("<input name='page'>").addClass("ipt1")).append($("<span>").text("页"))
				.append($("<span>").addClass("bar").text("GO").on("click",function(){
					var currPage=$("input[name='page']").val();
					if(currPage==""){
						alert("请输入要跳转到的页码");
						return;
					}
					//查询
					var pageSize=$("#pageSize").val();
					doSearch(currPage,pageSize);
					//绘制分页
					$(this).parent().pageBar({currPage:currPage});
				}));
		},
		/*	
			绘制一个页码按钮，供上面的方法使用
			i 当前按钮显示的页数，currPage当前页
		*/
		getBarByCurrPage:function(i,currPage){
			if(i==currPage){
				$(this).append($("<span>").addClass("bar bar2").text(i));
			}else{
				$(this).append($("<span>").text(i).addClass("bar").on("click",function(){
					var currPage=parseInt($(this).text());
					//查询
					var pageSize=$("#pageSize").val();
					doSearch(currPage,pageSize);
					//点击按钮，当前页改变，重新布局按钮
					$(this).parent().pageBar({currPage:currPage});
				}));
			}
		}
	});
})(jQuery);

3、效果如下图：