`
lgh06
  • 浏览: 54928 次
文章分类
社区版块
存档分类
最新评论

现在的项目中一段js翻页的实现 可能有bug

 
阅读更多




		jQuery(function() {
			var tabContainers = jQuery('div.tabs > div');
			tabContainers.hide().filter(':first').show();
			jQuery('div.tabs ul.tabNavigation a').click(function() {
				tabContainers.hide();
				tabContainers.filter(this.hash).show();
				jQuery('div.tabs ul.tabNavigation a').removeClass('selected');
				jQuery(this).addClass('selected');
				return false;
			}).filter(':first').click();
			
			/**
			*下方分页按钮实现
			**/
			var totalSize = ${totalSize} ;//总商品数
			var pages = ${pages} ;//总页数
			
			var currUrl = window.location.href;
			var currIdIndex = currUrl.indexOf("id");//获取Url中id的索引
			var currId = "";
			var currPage = 1;//当前页
			if(currUrl.indexOf("currPage")>0){
				currPage = currUrl.substring(currUrl.indexOf("currPage")+9, currUrl.length);
			}
			if(currIdIndex>0){
				currId = currUrl.substring(currIdIndex+3, currIdIndex+35);//截取id。默认了Id为32位
			}
			
			//before  start end  after
			var beforeHtml = ""; //页码之前的省略号页码的html
			var startBtn = 1; //默认从第一页开始
			if(currPage-10>=1){
				startBtn = parseInt(currPage/10)*10+1; //十页十页地显示
				if(currPage%10==0){
					startBtn = parseInt((currPage-1)/10)*10+1;	
				}
				beforeHtml = "<div class=\"ellipsis\"> <a href=\"category.do?id="+currId+"&currPage="+(startBtn-10)+"\">"+"<"+(startBtn-10)+"</a></div>";
				beforeHtml += "<div class=\"ellipsis\"> <a href=\"category.do?id="+currId+"&currPage="+(startBtn-1)+"\">"+"<"+(startBtn-1)+"</a></div>";
			}
			var afterHtml = ""; //页码之后的省略号的html
			var endBtn = Math.ceil(currPage/10)*10;//从最后一页结束
			if(endBtn >=pages){//endBtn不能大于pages
				endBtn = pages;
			}else{
				if(endBtn+10 >= pages){ //如果最后一个链接 + 10 大于总页数,则  链接到下一页 即可    
					afterHtml = "<div class=\"ellipsis\"><a href=\"category.do?id="+currId+"&currPage="+(endBtn+1)+"\">"+">"+(endBtn+1)+"</a></div>";
				}else{ //如果最后一个链接+ 10 小于等于总页数,则之后的省略号链接到endBtn+10
					afterHtml = "<div class=\"ellipsis\"><a href=\"category.do?id="+currId+"&currPage="+(endBtn+1)+"\">"+">"+(endBtn+1)+"</a></div>";
					afterHtml += "<div class=\"ellipsis\"><a href=\"category.do?id="+currId+"&currPage="+(endBtn+10)+"\">"+">>"+(endBtn+10)+"</a></div>";
				};			
			}


			
			
				var innerHtml = "";
			for(var i =startBtn;i<=endBtn;i++){
				if(i == currPage){
					innerHtml += "<div class=\"singlePager\"><span>"+i+"</span></div>";	
				}else{
					innerHtml += "<div class=\"singlePager\"> <a href=\"category.do?id="+currId+"&currPage="+i+"\">"+i+"</a></div>";
				};
			};
				$("div.cpage").append(beforeHtml);
				$("div.cpage").append(innerHtml);
				$("div.cpage").append(afterHtml);
			
			$("div.singlePager").css({
				"float":"left",
				"width":"6%",
				"padding":"0 auto",
				"text-align":"center"
			});
			$("div.ellipsis").css({
				"float":"left",
				"width":"7%",
				"padding":"0 auto",
				"background-color":"#EED7D7",
				"text-align":"center"
			});
			$("div.singlePager:last").nextAll("div.ellipsis:odd").css({
				"margin-left":"3px"
			});
			$("div.singlePager:first").prevAll("div.ellipsis:even").css({
				"margin-left":"3px"
			});
			
			$("div.singlePager a,div.singlePager span,div.ellipsis a").css({
			});
			
		});



基本相同的另外一页,用正则替换掉了currPage=数字

	jQuery(function() {

		
		/**
		*下方分页按钮实现
		**/
		var totalSize = ${totalSize} ;//总商品数
		var pages = ${pages} ;//总页数
		
		var currUrl = window.location.href;
		var currUrlNoPage = currUrl.replace(/&currPage=(\d)*/g,"");
		var currIdIndex = currUrl.indexOf("id");//获取Url中id的索引
		var currId = "";
		var currPage = 1;//当前页
		if(currUrl.indexOf("currPage")>0){
			currPage = currUrl.substring(currUrl.indexOf("currPage")+9, currUrl.length);
		}
		if(currIdIndex>0){
			currId = currUrl.substring(currIdIndex+3, currIdIndex+35);//截取id。默认了Id为32位
		}
		
		//before  start end  after
		var beforeHtml = ""; //页码之前的省略号页码的html
		var startBtn = 1; //默认从第一页开始
		if(currPage-10>=1){
			startBtn = parseInt(currPage/10)*10+1; //十页十页地显示
			if(currPage%10==0){
				startBtn = parseInt((currPage-1)/10)*10+1;	
			}
			beforeHtml = "<div class=\"ellipsis\"> <a href=\""+currUrlNoPage+"&currPage="+(startBtn-10)+"\">"+"<"+(startBtn-10)+"</a></div>";
			beforeHtml += "<div class=\"ellipsis\"> <a href=\""+currUrlNoPage+"&currPage="+(startBtn-1)+"\">"+"<"+(startBtn-1)+"</a></div>";
		}
		var afterHtml = ""; //页码之后的省略号的html
		var endBtn = Math.ceil(currPage/10)*10;//从最后一页结束
		if(endBtn >=pages){//endBtn不能大于pages
			endBtn = pages;
		}else{
			if(endBtn+10 >= pages){ //如果最后一个链接 + 10 大于总页数,则 链接到下一页 即可     //XXX**最后一页
				afterHtml = "<div class=\"ellipsis\"><a href=\""+currUrlNoPage+"&currPage="+(endBtn+1)+"\">"+">"+(endBtn+1)+"</a></div>";
			}else{ //如果最后一个链接+ 10 小于等于总页数,则之后的省略号链接到endBtn+10
				afterHtml = "<div class=\"ellipsis\"><a href=\""+currUrlNoPage+"&currPage="+(endBtn+1)+"\">"+">"+(endBtn+1)+"</a></div>";
				afterHtml += "<div class=\"ellipsis\"><a href=\""+currUrlNoPage+"&currPage="+(endBtn+10)+"\">"+">>"+(endBtn+10)+"</a></div>";				
			};	
		}


		
		
			var innerHtml = "";
		for(var i =startBtn;i<=endBtn;i++){
			if(i == currPage){
				innerHtml += "<div class=\"singlePager\"><span>"+i+"</span></div>";	
			}else{
				innerHtml += "<div class=\"singlePager\"> <a href=\""+currUrlNoPage+"&currPage="+i+"\">"+i+"</a></div>";
			};
		};
			$("div.cpage").append(beforeHtml);
			$("div.cpage").append(innerHtml);
			$("div.cpage").append(afterHtml);
		
			$("div.singlePager").css({
				"float":"left",
				"width":"6%",
				"padding":"0 auto",
				"text-align":"center"
			});
			$("div.ellipsis").css({
				"float":"left",
				"width":"7%",
				"padding":"0 auto",
				"background-color":"#EED7D7",
				"text-align":"center"
			});
			$("div.singlePager:last").nextAll("div.ellipsis:odd").css({
				"margin-left":"3px"
			});
			$("div.singlePager:first").prevAll("div.ellipsis:even").css({
				"margin-left":"3px"
			});
			console.log($("div.singlePager:first").prevAll());
		
		$("div.singlePager a,div.singlePager span,div.ellipsis a").css({
		});
		
	});


版权声明:本文为博主原创文章,未经博主允许不得转载。

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics