当前位置:主页 > 建站教程 > 建站技术 >

前端jquery分页插件kkPages

发布时间:2019-07-26 来源:互联网 浏览: 关键词:分页插件 kkPages 

1.添加分页导航css样式

/* kkPages */
.Pagination{float: right;height: 55px;_height: 45px; line-height: 20px;margin-right: 15px;_margin-right: 5px; color: 
#565656;margin-top: 10px;_margin-top: 20px; clear:both;}
.Pagination span{margin-right: 5px;display: block;float: left;margin-left: 5px;}
.Pagination span b{padding: 0 2px;}
.Pagination div {float:left}
.Pagination a{ font-size: 12px;text-decoration: none;display: block;float: left;color: #565656;border: 1px solid #cacaca;height: 20px;line-height: 20px;padding: 0 10px;margin: 0 2px;}
.Pagination .Ellipsis {line-height: 32px;overflow: hidden; display:none;}
cite.FormNum{display: block;float: left;line-height: 20px;height: 20px; font-style: normal; padding-left:10px;}
#PageNum{ color:#777;width: 30px;height: 20px;line-height: 20px; border: 1px solid #cacaca; margin:0 5px; text-align:center;}
.Pagination a:hover,.Pagination a.PageCur{background-color: #ee6600;border: 1px solid #d64c01;color: #ffffff; }

2、引入本插件(引入前添加jQuery引入)

<script src="jquery.kkPages.js"></script>
3、调用方法

$('.newslist').kkPages({  //那个元素里
   PagesClass:'li', //需要分页的元素
   PagesMth:5, //每页显示个数 
   PagesNavMth:5 //显示导航个数
});
效果:

前端jquery分页插件kkPages

jquery.kkPages.js源码

(function($){
 
	$.fn.kkPages = function(options){
		
		var opts = $.extend({},$.fn.kkPages.defaults, options);
		
		return this.each(function(){		
  			
			var $this = $(this);
			var $PagesClass = opts.PagesClass; // 分页元素
			var $AllMth = $this.find($PagesClass).length;  //总个数
			var $Mth = opts.PagesMth; //每页显示个数
			var $NavMth = opts.PagesNavMth; // 导航显示个数
			
			
			// 定义分页导航
			var PagesNavHtml = "<div class=\"Pagination\"><a href=\"javascript:;\" class=\"homePage\">首页</a><a href=\"javascript:;\" class=\"PagePrev\">上一页</a><span class=\"Ellipsis\"><b>...</b></span><div class=\"pagesnum\"></div><span class=\"Ellipsis\"><b>...</b></span><a href=\"javascript:;\" class=\"PageNext\">下一页</a><a href=\"javascript:;\" class=\"lastPage\">尾页</a><cite class=\"FormNum\">直接到第<input type=\"text\" name=\"PageNum\" id=\"PageNum\">页</cite><a href=\"javascript:;\" class=\"PageNumOK\">确定</a></div>";
 
			/*默认初始化显示*/
			
			if($AllMth > $Mth){
					
					//判断显示
					var relMth = $Mth - 1;
					$this.find($PagesClass).filter(":gt("+relMth+")").hide();
 
					// 计算数量,页数
					var PagesMth = Math.ceil($AllMth / $Mth); // 计算页数
					var PagesMthTxt = "<span>共<b>"+$AllMth+"</b>条,共<b>"+PagesMth+"</b>页</span>";
					$this.append(PagesNavHtml).find(".Pagination").append(PagesMthTxt);
					
					
					// 计算分页导航显示数量
						
						var PagesNavNum = "";
						for(var i=1;i<=PagesMth;i++){
							
							PagesNavNum = PagesNavNum + "<a href=\"javascript:;\">"+i+"</a>";
					
							};
						
						$this.find(".pagesnum").append(PagesNavNum).find("a:first").addClass("PageCur");
 
					
					//判断是否显示省略号
					if($NavMth < PagesMth){
							
							$this.find("span.Ellipsis:last").show();
							var relNavMth = $NavMth - 1;
							$this.find(".pagesnum a").filter(":gt("+relNavMth+")").hide();
							
						}else{
							
								$this.find("span.Ellipsis:last").hide();
							};
					
					
				/*默认显示已完成,下面是控制区域代码*/
				
				
				//跳转页面
				var $input = $this.find(".Pagination #PageNum");
				var $submit = $this.find(".Pagination .PageNumOK");
				
				//跳转页面文本框
				$input.keyup(function(){
					
						var pattern_d = /^\d+$/; //全数字正则
						
						if(!pattern_d.exec($input.val())) {   
                  		 	
							alert("友情提示:\n\n请填写正确的数字!");
							$input.focus().val("");
							return false
							
                		};
						
					});
				
				//跳转页面确定按钮
				$submit.click(function(){
					
						if($input.val() == ""){
							
							alert("友情提示:\n\n请填写您要跳转到第几页!");
							$input.focus().val("");
							return false
							
							}if($input.val() > PagesMth){
								
								alert("友情提示:\n\n您跳转的页面不存在!");
								$input.focus().val("");
								return false
								
								}else{
							
								showPages($input.val());
							
							};
					
					});
					
				
				//导航控制分页
				var $PagesNav = $this.find(".pagesnum a"); //导航指向
				var $PagesFrist = $this.find(".homePage"); //首页
				var $PagesLast = $this.find(".lastPage"); //尾页
				var $PagesPrev = $this.find(".PagePrev"); //上一页
				var $PagesNext = $this.find(".PageNext"); //下一页
				
				//导航指向
				$PagesNav.click(function(){
					
						var NavTxt = $(this).text();
						showPages(NavTxt);
					
					});
					
				//首页
				$PagesFrist.click(function(){
					
						showPages(1);
					
					});
					
				//尾页
				$PagesLast.click(function(){
					
						showPages(PagesMth);
					
					});
					
				//上一页
				$PagesPrev.click(function(){
						
						var OldNav = $this.find(".pagesnum a[class=PageCur]");
 
						if(OldNav.text() == 1){alert("友情提示:\n\n不要再点啦~已经是首页啦!");}else{
									
									var NavTxt = parseInt(OldNav.text()) - 1;
									showPages(NavTxt);
								
								};
					
					});
					
				//下一页
				$PagesNext.click(function(){
						
						var OldNav = $this.find(".pagesnum a[class=PageCur]");
	
						if(OldNav.text() == PagesMth){alert("友情提示:\n\n不要再点啦~已经是最后一页啦!");}else{
									
									var NavTxt = parseInt(OldNav.text()) + 1;
									showPages(NavTxt);
								
								};
					
					});
			
			// 主体显示隐藏分页函数
			function showPages(page){
 
					$PagesNav.each(function(){
						
						var NavText = $(this).text();
						
						if(NavText == page){
					
							$(this).addClass("PageCur").siblings().removeClass("PageCur");					
				
						};
					});
				
				//显示导航样式
				var AllMth = PagesMth / $NavMth;
				for(var i=1;i<=AllMth;i++){
					
						if(page > (i*$NavMth)){
							
								$PagesNav.filter(":gt("+(i*$NavMth-1)+")").show();
								$PagesNav.filter(":gt("+(i*$NavMth-1+$NavMth)+")").hide();
								$PagesNav.filter(":lt("+(i*$NavMth)+")").hide();
								
								$this.find("span.Ellipsis:first").show();							
							
							};
						
						if(page <= $NavMth){
							
								$PagesNav.filter(":gt("+($NavMth-1)+")").hide();
								$PagesNav.filter(":lt("+$NavMth+")").show();
								
								$this.find("span.Ellipsis:first").hide();								
							
							};
 
					};
					
					
					// 显示内容区域
					var LeftPage = $Mth * (page-1);
					var NowPage = $Mth * page;
				
					$this.find($PagesClass).hide();
					$this.find($PagesClass).filter(":lt("+(NowPage)+")").show();
					$this.find($PagesClass).filter(":lt("+(LeftPage)+")").hide();
					
				};
				
				
			}; //判断结束			
				
		}); //主体代码
	};
	
	// 默认参数
	$.fn.kkPages.defaults = {
		
		PagesClass:'.item', //需要分页的元素
		PagesMth:4, //每页显示个数		
		PagesNavMth:5 //显示导航个数
	};
	
	$.fn.kkPages.setDefaults = function(settings) {
		$.extend( $.fn.kkPages.defaults, settings );
	};
	
})(jQuery);

DEMO下载:链接:https://pan.baidu.com/s/1nZGuJSGr1zxEAgZMsFGw8Q  提取码:1ar4 

责任编辑:mokuge

相关文章

    共有人阅读,期待你的评论!评论
    说点什么吧
    • 全部评论(0
    Top