快速实现-简单分页器(下)

上一节的分页器只能实现简单的效果，是无法点击到中间页码的

这一节，我们需要稍微改造一下

考虑问题： 1. 当点击到5， 6， 7的时候页码应该是活动的，并且页码向后移动 2. 这时应该出现两边都有省略号

So 1. 我们完全可以将上一节左右两边都有省略号的情况抠出来，作为函数around 2. 在首页情况下的时候，做一次判断，判断当前页码 离首页 间隔有一定数量的时候，使其变为两边都有省略号的效果 3. 在尾页情况下的时候，也同上

抠出两边都有省略号的情况
/**

• 两边都有省略号
• @param {*} total 总页数
• @param {*} pagesLen 页码个数

• @param {} cur 当前页码
  /
  function around(total, pagesLen, cur) {
  let pagesNum = [];
  let side = (pagesLen - 5) / 2;
  // 左边的数组
  let leftArr = [],
  // 右边的数组
  rightArr = [];

  // 左右两边都匀称
  for (var i = 1; i <= side; i++) {
  leftArr.unshift(cur - i);
  rightArr.push(cur + i);
  }
  // 考虑一下 如何不能整除，我们可以视情况而定，添加一个在左边，或者右边
  pagesNum = (pagesLen - 5) % 2 === 0 ? [1, '...'].concat(leftArr, cur, rightArr, '...', total) : [1, '...'].concat(cur - Math.ceil(side), leftArr, cur, rightArr, '...', total);
  return pagesNum;
  }
  第二步： 给 首页及尾页显示的情况再加一层判断

/**

• @param {*} total 总页数
• @param {*} pagesLen 页码个数

• @param {} cur 当前页码
  /
  function drawPage(total, pagesLen, cur) {
  // 可显示页码数 = 页码个数 - (首页|尾页 + 一个省略号)
  var temp = pagesLen - 2;

  // 显示页码数组
  let pagesNum = [];

  // 如果total总数小于页码个数，我们就采用total总数
  if (total <= pagesLen) {
  for (var i = 0; i < total; i++) {
  pagesNum.push(i + 1);
  }
  } else {
  // 如果total大于页码总数,则需要分为三种情况

  // 1、 第一种，当前页码是否小于 temp (temp为 页码数 - 2)
  if (cur <= temp) {
      // 当前页码离首页稍近的时候，尾部显示省略号
      if (cur <= temp - Math.ceil(temp / 2)) {
          for (var i = 0; i < temp; i++) {
              pagesNum.push(i + 1);
          }
          pagesNum.push('...', total);
      } else {
          // 当前页码离首页较远的时候，出现两边省略号
          pagesNum = around(total, pagesLen, cur);
      }
  
      // 2. 第二种，当前页码是否大于 总数 - temp,
  } else if (cur >= total - temp) {
      // 当前页码离尾页稍近的时候，首部显示省略号
      if (cur >= total - Math.floor(temp / 2)) {
          for (var i = 0; i < temp; i++) {
              pagesNum.unshift(total - i);
          }
          pagesNum.unshift(1, '...')
      } else {
          // 当前页码离尾页页较远的时候，出现两边省略号
          pagesNum = around(total, pagesLen, cur);
      }
  
  } else {
      // 如果以上情况不成立，则显示两个省略号
      pagesNum = around(total, pagesLen, cur);
  }

  }
  return pagesNum;
  }
  效果：

console.log(drawPage(100, 9 ,1)); // [ 1, 2, 3, 4, 5, 6, 7, '...', 100 ]
console.log(drawPage(100, 9 ,7)); // [ 1, '...', 5, 6, 7, 8, 9, '...', 100 ]

console.log(drawPage(100, 9 ,97)); // [ 1, '...', 94, 95, 96, 97, 98, 99, 100 ]
console.log(drawPage(100, 9 ,94)); // [ 1, '...', 92, 93, 94, 95, 96, '...', 100 ]

console.log(drawPage(100, 9 ,50)); // [ 1, '...', 48, 49, 50, 51, 52, '...', 100 ]
页面上测试 JS：

var pages = document.getElementById('pages');
// 页码的个数：比如9
var pagesSum = pages.children.length;
// 模拟数据： 页码总数： 比如100
var pageTotal = 100;

// 点击事件
pages.onclick = function (e) {
var tar = e.target;
if (tar.nodeName === 'LI') {
let numTxt = tar.innerText;
// 如果是... 就直接返回
if (numTxt === '...') return;

    // 改变页码
    changePage(pageTotal, pagesSum, numTxt * 1);
    // 给对应的页码加上高亮
    for (var i = 0; i < pages.children.length; i++) {
        pages.children[i].className = pages.children[i].innerText === numTxt ? 'current' : '';
    }
}

}

// 默认改变一次
changePage(pageTotal, pagesSum, 1);

// 改变页码
function changePage(total, pagesLen, cur) {
// 生成页码
let nums = drawPage(total, pagesLen, cur);
for (var i = 0; i < pages.children.length; i++) {
// 将页码绘制对应位置上
pages.children[i].innerText = nums[i];
}
}
<div class="page-container">
<span id="prev-page">上一页</span>
<ul id="pages">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<span id="next-page">下一页</span>
</div>
CSS

<style>

• {
  margin: 0;
  padding: 0;
  list-style: none;
  }

  .page-container {
      width: 480px;
      height: 30px;
      line-height: 30px;
      margin: 100px auto;
      border: 1px solid #ccc;
      display: flex;
      justify-content: space-between;
  }
  
  .page-container>span {
      padding: 0 10px;
  }
  
  .page-container>ul {
      flex: 1;
      display: flex;
  
  }
  
  .page-container>ul>li {
      flex: 1;
      text-align: center;
      border-right: 1px solid #ccc;
      cursor: pointer;
  }
  
  .page-container>ul>li.current {
      color: orange;
  }
  
  .page-container>ul>li:first-child {
      border-left: 1px solid #ccc;
  }

  </style>
  转载自【知乎--贝程学院】