如何写一个简单的分页组件(原理)

来说说分页最基本的原理

先研究下element-pagation的分页展示形式,发现有以下规律,然后就有了以下的代码

1,2,3,4,5,6,7
1,2,3,4,5,6,...,8
1,...,3,4,5,6,7,8
1,...,3,4,5,6,...,8
复制代码
function showPages(page, total,pagerCount) {
  var str = "" 
  for (var i = 1; i <= total; i++) {
	  if(total > pagerCount){
		  if(total-pagerCount >1){
				var middle = Math.ceil(total/2)
				if(total - page < 4){
					if(i == 2){
					  str =  str + "..." 
					}else if( i > total-6 || i == 1 ){
					 str = str + i +  ""
					}	
				}else if( page < 5 ){
					if(i == total-1){
						str =  str + "..." 
					}else if(i < 7 || i == total){
						str = str + i +  ""
					} 
				}else{
					if(i == total-1){
						str =  str + "..." 
					}else if(i == 2){
						str =  str + "..." 
					}else if(page-2 <= i && i<= page+2){
						str = str + i +  ""
					}else if(i == 1){
						str = str + i +  ""
					}else if(i == total){
						str = str + i +  ""
					}
				}			
		  }else{
				var middle = total/2
				if(page>middle){						
					if(i == 2){
						str =  str + "..." 
					}else{
						str = str + i +  ""
					} 
				}else{	
					if(i == total-1){
					  str =  str + "..." 
					}{	
					  str = str + i +  ""
					}		
				}		
		  }
      }else{
		str = str +   "" + i
      }
  }
  return str
}
var total = 11
for (var i = 1; i <= total; i++) {
  var ret = showPages(i, total,7)
  console.log(ret)
}
复制代码
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值