JavaScript 纯前端分页功能实现详解

<!-- 分页 -->
 <div class="pageBox">
 <div class="pageTotal">共<span id="dataLength">88</span>条</div>
 <div class="pageContent">
  <button class='firstPage'>首页</button>
  <button class="prevPage"></button>
  <button class="showPage"></button>
  <button class="nextPage"></button>
  <button class="lastPage">尾页</button>
 </div>
 <div class="selectSize">
  <div><span class="numSelect">10</span> <span>条/页</span></div>
  <div class="icona"></div>
 </div>
 <!-- <div id="test1" style="display: inline-block;margin-left: 210px;"></div> -->
 <div class="goPage"><span>跳至</span><input type="text" id="goPageInp"><span>页</span></div>
 <ul class="pageSelectShow">
  <li data-num="10">10条/页</li>
  <li data-num="20">20条/页</li>
  <li data-num="50">50条/页</li>
  <li data-num="100">100条/页</li>
 </ul>
 </div>

 * {
  padding: 0;
  margin: 0;


 }

 body,
 html {
  width: 100%;
  height: 100%;
 }


 .pageBox{
  width: 60%;
  margin-left: 20%;
  margin-top: 200px;
  position: relative;
  height: 50px;

 }
 .pageBox>div{
  float: left;
  margin: 0 10px;
 }
 .pageContent>button{
  float: left;
  margin: 0px 4px;
  border: none;
  outline: none;
 }
.goPage,.pageTotal{
 height: 30px;
 vertical-align: middle;
 font-size: 14px;

}
.goPage{
 right: 50px;
}
.goPage span{
 display: inline-block;
 color: #999999;
 
}
.goPage input{
 display: inline-block;
 width: 50px;
 height: 30px;
 margin: 0px 5px;
 border: none;
 border: 1px solid #ccc;
 border-radius: 4px;
 text-align: center;
}
.pageTotal{
 left: 50px;
 line-height: 30px;
 font-size: 15px;
 color: #999;
}
.pageTotal span{
 margin: 0 3px;
 color: #333;
}

.selectSize{
 width: 100px;
 height: 30px;
 border: 1px solid #ccc;
 border-radius: 4px;
 font-size: 14px;
 text-align: center;
 line-height: 30px;
 vertical-align: middle;
 position: relative;

}
.selectSize>div{
 float: left;
 margin-left: 5px;
}
.icona{
 width: 20px;
 height: 20px;
 background-image: url('./down.png');
 background-size: 100% 100%;
 background-position: center center;
 margin-top: 5px;
 cursor: pointer;
 position: absolute;
 right: 6px;

}
.pageSelectShow{
 width: 100px;
 height: 162px;
 border: 1px solid #ccc;
 overflow-y: auto;
 position: absolute;
 top: -170px;
 left: 400px;
 list-style: none;
 font-size: 15px;
 display: none;
 background: #fff;
 border-radius: 3px;
}
.pageSelectShow li{
 width: 100%;
 height: 40px;
 line-height: 40px;
 text-align: center;
 cursor: pointer;

}
.pageContent>div{
 cursor: pointer;
 height: 30px;

}
.firstPage,.lastPage{
 width: 60px;
}
.firstPage,.lastPage,.showPage{
 background:rgb(67, 133, 255);
 color: #fff;
 font-size: 15px;
 line-height: 30px;
 text-align: center;
 border-radius: 4px;
}
.showPage{
 width: 40px;
}
.prevPage,.nextPage{
 height: 30px;
 width: 50px;
 border: 1px solid #ccc;
 border-radius: 4px;
 background-repeat: no-repeat;
 background-position: center center;
 background-size: 20px 20px;

}
.prevPage{
 background-image: url('./prev.png');
 
}
.nextPage{
 background-image: url('./next.png');
}
.nowtouch{
 color:#009E94
}

 //点击显示选择条数的div
 var showFlag = true;
 var numcount = 1;//默认第一页
 var dataLength =10000;
 $('#dataLength').text(dataLength);
 var allCount = Math.ceil(dataLength / 10);
 console.log(allCount);
 //分页跳转
 $('.showPage').text(numcount)
 if (numcount === 1) {
  firstDis(true, 'not-allowed', '0.5')
 }
 if (numcount === allCount) {
  lastDis(true, 'not-allowed', '0.5')

 }
 
 $('.icona').click(function () {
  if (showFlag) {
  $('.pageSelectShow').css({
   'display': 'block'
  });
  $('.icona').css({
   'background-image': 'url(' + './up.png' + ')'
  })
  showFlag = !showFlag;

  } else {
  $('.pageSelectShow').css({
   'display': 'none'
  })
  $('.icona').css({
   'background-image': 'url(' + './down.png' + ')'
  })
  showFlag = !showFlag;
  }
 })
 //点击选择条数
 //

 $('.pageSelectShow li').click(function (e) {
  console.log(e.target.innerHTML)
  var countLength = e.target.innerHTML
  for(var i = 0; i < countLength.length;i++){
  console.log(countLength[i])
  }
  $('.numSelect').text($(this).data('num'));
  allCount = Math.ceil(dataLength / e.target.dataset.num);
  
  if(allCount == 1){
  firstDis(true, 'not-allowed', '0.5');
  lastDis(true, 'not-allowed', '0.5')
  }else{
  firstDis(true, 'not-allowed', '0.5')
    lastDis(false, 'pointer', '1')
  }
  $(this).addClass('nowtouch').siblings().removeClass('nowtouch')
  $('.pageSelectShow').css({
  'display': 'none'
  })
  $('.icona').css({
  'background-image': 'url(' + './down.png' + ')'
  })
 })

 //点击首页
 $('.firstPage').click(function () {
  numcount = 1;
  $('.showPage').text(numcount);
  firstDis(true, 'not-allowed', '0.5')
  lastDis(false, 'pointer', '1')
 })
 //点击上一页
 $('.prevPage').click(function () {
  var prevNum = Number($('.showPage').text());
  prevNum--;
  $('.showPage').text(prevNum);
  if (prevNum == numcount) {
  firstDis(true, 'not-allowed', '0.5')
  } else {
  lastDis(false, 'pointer', '1')
  }
 })
 //点击下一页
 $('.nextPage').click(function () {
  var prevNum = Number($('.showPage').text());
  prevNum++
  firstDis(false, 'pointer', '1')
  $('.showPage').text(prevNum);
  if (prevNum == allCount) {
  lastDis(true, 'not-allowed', '0.5')
  } else {
  lastDis(false, 'pointer', '1')
  }
 })
 //点击尾页
 $('.lastPage').click(function () {
  numcount = allCount
  $('.showPage').text(allCount);
  firstDis(false, 'pointer', '1')
  lastDis(true, 'not-allowed', '0.5')
 })
 //当页码为1,禁止点击的函数
 function firstDis(boolVal, cursorVal, opacityVal) {
  $('.firstPage').attr('disabled', boolVal);
  $('.firstPage').css({
  'cursor': cursorVal,
  'opacity': opacityVal
  })
  $('.prevPage').attr('disabled', boolVal);
  $('.prevPage').css({
  'cursor': cursorVal,
  'opacity': opacityVal
  })
 }
 //当页码为20,禁止点击的函数
 function lastDis(boolVal, cursorVal, opacityVal) {
  $('.lastPage').attr('disabled', boolVal);
  $('.lastPage').css({
  'cursor': cursorVal,
  'opacity': opacityVal
  })
  $('.nextPage').attr('disabled', boolVal);
  $('.nextPage').css({
  'cursor': cursorVal,
  'opacity': opacityVal
  })
 }
 //键盘事件
 $('#goPageInp').on('keydown', function (e) {
  if (e.keyCode == 13) {
  var vals = e.target.value;
  console.log(Number(vals));
  $(this).blur();
  if(Number(vals) && Number(vals) <=allCount ){
   $('.showPage').text(vals);
  if (vals == allCount) {
   firstDis(false, 'pointer', '1')
   lastDis(true, 'not-allowed', '0.5')
  }
  if (vals == numcount) {
   lastDis(false, 'pointer', '1')
   firstDis(true, 'not-allowed', '0.5')
  }
  e.target.value = ''
  }else{
   alert('输入错误');
   e.target.value = ''
  }
  
  
  }
})