原生 js 封装一个分页器组件

效果

功能

• 生成指定范围页码
• 居中显示当前页码, 并高亮
• 首页, 尾页跳转页首,页尾 自动禁用

使用

调用createPager()传递四个参数, 当前页码, 总页码,可视页码,容器DOM

实现

可视最小页码范围: 当前页码 - 可视页码 / 2

范围界定: <1 最小页码为 1

最大可视页码范围: 最小页码 + 最大可视页码 - 1

范围界定: >总页码 最大页码为总页码

code

function createPager(current, total, mostNumber, container) {

  const pageDiv = document.createElement("div");
  pageDiv.classList.add("pager");

  container.innerHTML = "";

  function minNumber() {
    const min = current - mostNumber / 2;
    if (min < 1) {
      return 1;
    }
    return min;
  }
  
  function maxNumber() {
    const max = minNumber() + mostNumber - 1;
    if (max >= total) {
      return total;
    }
    return max;
  }

  function createElement(text, className, newPage) {
    const el = document.createElement("a");
    el.textContent = text;
    if (className) {
      el.classList.add(className);
    }
    pageDiv.appendChild(el);
    if (newPage < 1 || newPage > total || newPage === current) {
      return;
    }
    el.addEventListener("click", function () {
      createPager(newPage, total, mostNumber, container);
    });
  }
  // 生成所有元素
  createElement("首页", current === 1 ? "disabled" : "", 1);
  createElement("<<", current === 1 ? "disabled" : "", current - 1);

  for (let i = minNumber(); i <= maxNumber(); i++) {
    createElement(i, i === current ? "active" : "", i);
  }

  createElement(">>", current === total ? "disabled" : "", current + 1);
  createElement("末尾", current === total ? "disabled" : "", total);
  let size = document.createElement("span");
  size.textContent = `${current}/${total}`;
  pageDiv.appendChild(size);
  container.appendChild(pageDiv);
}