IVY DOM


 

人生就像一副复杂拼图
每个人总有属於自己的记忆碎片
优质美国空间-老薛主机|IVY DOM|Flowline|

联系我

RSS




五月 17, 2015

jQuery 分页

嗯,这东西不是很复杂,但是我居然调了2个小时bug :( 这是个悲伤的故事

支持:

1.重绘当前显示的页码

2.跳到最后一页

3.随意跳页

4.检测终页

缺点:

非响应式(懒的做qwq)

总页数在ul里记录,改变whole-page属性值即可

HTML

<style>
.the_btn{
    z-index: 2;
    cursor: pointer;
    background-color: #DF4931;
    border: 1px solid #DF4931;
    border-radius: 4px;
    text-align: center;
    color: #FFF;
    font-size: .875em;
    line-height: 20px;
    padding: 4px 12px;
    font-family: "Montserrat",Arial,sans-serif;
    display: inline-block;
    transition: background-color 0.4s linear 0s, color 0.4s linear 0s;
}

.the_btn:hover{
    
}

.the_btn.btn-large {
    border-radius: 6px;
    font-size: 1.09375em;
    padding: 11px 19px;
}

.the_btn.dark {
    background-color: #33353E;
    border-color: #33353E;
}

.the_btn.white{
    background-color: #FFFFFF;
    border-color: #DDD;
    color: rgb(30,30,30);
}

.the_btn.white:hvoer{
    background: #DDD;
    border-color: #DDD;
}

.the_btn.blue_border{
    color: rgb(255,255,255);
}

.the_btn.blue_border:hover{
    border-color: #55B1E1;
    color:rgb(30,30,30);
}

.the_btn.light_blue{
    background-color: #55B1E1;
    border-color: #55B1E1;
}

.the_btn.no_radius{
    border-radius: 0px;
}

.the_btn.pagination_active{
    cursor: default;
    border:none;
    background: rgba(255,255,255,0);
}

.the_btn:hover{
    background: rgba(255,255,255,0.1);
    border-color: rgb(255,255,255);
}

.the_btn.black_color:hover{
    color: rgb(30,30,30);
    border-color: rgb(30,30,30);
}
</style>
<div class="pagination">
 <ul whole-page="233">
 <li>共 233 页</li>
 <li><a class="the_btn white" id="page_home" href="javascript:void(0)">首页</a></li>
 <li><a class="the_btn white pagination_active" id="page_1" href="javascript:void(0)">1</a></li>
 <li><a class="the_btn white" id="page_2" href="javascript:void(0)">2</a></li>
 <li><a class="the_btn white" id="page_3" href="javascript:void(0)">3</a></li>
 <li><a class="the_btn white" id="page_4" href="javascript:void(0)">4</a></li>
 <li><a class="the_btn white" id="page_5" href="javascript:void(0)">5</a></li>
 <li><a class="the_btn white" id="page_6" href="javascript:void(0)">6</a></li>
 <li><a class="the_btn white" id="page_7" href="javascript:void(0)">7</a></li>
 <li><a class="the_btn white" id="page_next" href="javascript:void(0)">下页</a></li>
 <li><a class="the_btn white" id="page_last" href="javascript:void(0)">末页</a></li>
 <li><input class="the_input small" id="page_page" type="number"></li>
 <li><a class="the_btn white" id="page_submit" href="javascript:void(0)">确定</a></li>
 </ul>
 </div>

javascript

			function getTotalPages(obj){
				return $(obj).parent().attr('whole-page');
			}

			function getCurrentPage(obj){
				return $(obj).parent().find('.pagination_active').attr('id').split('_')[1];
			}

			function getFirstpage(obj){
				return $(obj).parent().find('li:nth-child(3)').html();
			}

			function getLastPage(obj){
				return parseInt($(obj).parent().find('li').length)-6;
			}

			function getNextPage(cp){
				return parseInt(cp)+1;
			}

			function setThisPageActive(obj,page){
				removeActive(obj);
				$(obj).parent().find('#page_'+page).addClass('pagination_active');
			}

			function reDrawPage(obj,s,l){
				l=(l==null)?false:l;
				if(!l){
					var start=s;
				}else{
					var start=parseInt(s)-parseInt(getLastPage(obj))+1;
				}
				$(obj).parent().find('li a').each(function(){
					if(!isNaN($(this).html())){
						$(this).html(start);
						$(this).attr('id','page_'+start);
						start=parseInt(start)+1;
					}
				});
			}

			function towhichPage(obj,lastPage,nextPage,isLast){
				isLast=(isLast==null)?false:isLast;
				var _thisParent=$(obj).parent();
				if(!isLast){
					var mid=Math.ceil(Math.ceil(getLastPage(obj))/2);
					var midPos=mid+2;
					removeActive(obj);
					var index=nextPage-mid+1;
				}else{
					midPos=getLastPage(obj)+2;
					var index=lastPage;
					nextPage=index;
					removeActive(obj);
				}
				reDrawPage(obj,index,isLast);
				_thisParent.find('li:nth-child('+midPos+')').html('<a class="the_btn white pagination_active" id="page_'+nextPage+'" href="javascript:void(0)">'+nextPage+'</a>');
			}

			$('.pagination ul li').click(function(){
				if($(this).find('input').length!=0){return;}
				var tagAInThis=$(this).find('a');
				var htmlInA=tagAInThis.attr('id').split('_')[1];
				if(!isNaN(htmlInA)){
					removeActive(this);
					tagAInThis.addClass('pagination_active');
				}else{
					switch(htmlInA){
						case 'home':
							if($(this).parent().find('#page_1').length==0){
								var start=1;
								reDrawPage(this,start);
								setThisPageActive(this,1);
							}else{
								setThisPageActive(this,1);
							}
							break;
						case 'next':
							var _this=$(this);
							var _thisParent=_this.parent();
							var firstPage=getFirstpage(this);
							var lastPage=getLastPage(this);
							var currentPage=getCurrentPage(this);
							var nextPage=getNextPage(currentPage);
							if(nextPage>=lastPage && nextPage<=getTotalPages(this)){
								towhichPage(this,lastPage,nextPage);
							}else{
								setThisPageActive(this,nextPage);
							}
							break;
						case 'last':
							var total=getTotalPages(this);
							var lastPage=getLastPage(this);
							var nextPage=getNextPage(total);
							if(total>=lastPage && total<=getTotalPages(this)){
								towhichPage(this,total,nextPage,true);
							}else{
								setThisPageActive(this,total);
							}
							break;
						case 'submit':
							var pageObtained=$(this).parent().find('input').val();
							if(pageObtained==''){
								alert('请输入页数');
							}else{
								towhichPage(this,pageObtained,getNextPage(pageObtained)-1);
							}
							break;
					}
				}

其实前端很好玩嘛,比后台轻松多了qwq
后台的架构,逻辑害死我

相关文章

返回
  1. 暂无评论。

  1. 暂无 Trackback

You must be logged in to post a comment.