jquery的web前端的分页插件

最新推荐文章于 2024-02-11 14:39:28 发布

forwardMyLife

最新推荐文章于 2024-02-11 14:39:28 发布

阅读量1k

点赞数 1

分类专栏： js 文章标签： web前端分页插件

本文链接：https://blog.csdn.net/lucky_ly/article/details/84202434

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在web前端开发中，一个分页插件，是常常会用到的，自己做项目也经常会用到，找到一个不错的插件，自己整改了下。

1.分页相关样式

.pageCode {
	padding: 15px 20px;
	color:#16181B;
	text-align: center;
}

.pageCode a:link {
	color:#16181B;
}

.pageCode a {
	display: inline-block;
	color: #16181B
	height: 25px;
	line-height: 25px;
	padding: 0 10px;
	border: 1px solid #16181B;
	margin: 0 2px;
	border-radius: 4px;
	vertical-align: middle;
}


.pageCode a:hover {
	text-decoration: none;
	border: 1px solid #428bca;
}

.pageCode span.current {
	display: inline-block;
	height: 25px;
	line-height: 25px;
	padding: 0 10px;
	margin: 0 2px;
	color: #fff;
	background-color: #428bca;
	border: 1px solid #428bca;
	border-radius: 4px;
	vertical-align: middle;
}

.pageCode span.disabled {
	display: inline-block;
	height: 25px;
	line-height: 25px;
	padding: 0 10px;
	margin: 0 2px;
	color: #bfbfbf;
	background: #f2f2f2;
	border: 1px solid #bfbfbf;
	border-radius: 4px;
	vertical-align: middle;
}

js代码

(function($){
	var pageObj = {
		init:function(obj,args){
			return (function(){
				pageObj.fillHtml(obj,args);
				pageObj.bindEvent(obj,args);
				if(typeof(args.backFn)=="function"){//回调第一页函数
					args.backFn(1);
				}
			})();
		},
		
		//填充html
		fillHtml:function(obj,args){
			return (function(){
				obj.empty();
				//上一页
				if(args.current > 1){
					obj.append('<a href="javascript:void(0);" class="prevPage">上一页</a>');
				}else{
					obj.remove('.prevPage');
					obj.append('<span class="disabled">上一页</span>');
				}
				
				//中间页码起始坐标
				var start,end;
				if(args.current >4 ){
					obj.append('<a href="javascript:void(0);" class="tcdNumber">'+1+'</a>');
					obj.append('<span>...</span>');
					start = args.current - 2;
					end = args.current +2 <= args.pageCount ? args.current + 2 : args.pageCount;
				}else{
					if(args.current == 4){
						start = 1;
					}else{
						start = args.current - 2 >0 ? args.current -2 : 1;
					}
					
					end = args.current +2 <= args.pageCount ? args.current + 2 : args.pageCount;
				}
				
				for(var i= start;i<=end;i++){
					if(args.current == i){
						obj.append('<span class="current">'+ i +'</span>');
					}else{
						obj.append('<a href="javascript:void(0);" class="tcdNumber">'+i+'</a>');
					}
				}
				//
				if(end +1 < args.pageCount){
					obj.append('<span>...</span>');
					obj.append('<a href="javascript:void(0);" class="tcdNumber">'+args.pageCount+'</a>');
				}else{
					if(end +1 == args.pageCount){//添加最后一页
						obj.append('<a href="javascript:void(0);" class="tcdNumber">'+args.pageCount+'</a>');
					}
				}
				

				//下一页
				if(args.current < args.pageCount){
					obj.append('<a href="javascript:;" class="nextPage">下一页</a>');
				}else{
					obj.remove('.nextPage');
					obj.append('<span class="disabled">下一页</span>');
				}
			})();
		},
		

		//绑定事件
		bindEvent:function(obj,args){
			return (function(){
				obj.on("click","a.tcdNumber",function(){
					var current = parseInt($(this).text());
					pageObj.fillHtml(obj,{"current":current,"pageCount":args.pageCount});
					if(typeof(args.backFn)=="function"){
						args.backFn(current);
					}
				});
				//上一页
				obj.on("click","a.prevPage",function(){
					var current = parseInt(obj.children("span.current").text());
					pageObj.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount});
					if(typeof(args.backFn)=="function"){
						args.backFn(current-1);
					}
				});
				//下一页
				obj.on("click","a.nextPage",function(){
					var current = parseInt(obj.children("span.current").text());
					pageObj.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount});
					if(typeof(args.backFn)=="function"){
						args.backFn(current+1);
					}
				});
			})();
		}
	}
	$.fn.createPage = function(options){
		var args = $.extend({
			pageCount : 10,
			current : 1,
			backFn : function(){}
		},options);
		pageObj.init(this,args);
	}
})(jQuery);

测试代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/tcdPageCode.css"/>
		<script type="text/javascript" src="jquery-3.3.1.js" ></script>
		<script type="text/javascript" src="js/jquery.page.js" ></script>
	</head>
	<body>
		<div class="pageCode" id="commenttcpage"></div>
		<script>
			$(function(){
				$("#commenttcpage").createPage({
						pageCount:18,
						current:1,
						backFn:function(current){
							//current为当前页数
							console.info(current);
						}
					}
				);
			})
		</script>
	</body>
</html>

该方法是挂载在jquery下的，所以要引入jquery,backFn为回调函数，有个当前为第几页的参数，后台可根据此参数，查询数据，显示数据。
在这里插入图片描述

forwardMyLife

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
jquery的web前端的分页插件

在web前端开发中，一个分页插件，是常常会用到的，自己做项目也经常会用到，找到一个不错的插件，自己整改了下。1.分页相关样式.pageCode { padding: 15px 20px; color:#16181B; text-align: center;}.pageCode a:link { color:#16181B;}.pageCode a { display: i...
复制链接

扫一扫