JS简单实现分页显示

完整代码源码可以在这里下载

1.在 HTML文件建立列表目标节点和翻页器目标节点

<body>
<!--页面控制器 -->
  <div id="nav"></div>
  <!--列表显示 -->
  <div class="root" id="target"></div>
  <!--导入js-->
  <script src="./test.js"></script>
</body>

2.JS

分页控制器函数封装

/**
 * 
 * @param {列表渲染目标节点} listTarget 
 * @param {页面控制器目标节点} navTarget 
 * @param {列表项渲染函数} renderFunc 
 * @param {每页项数} pageSize 
 * @param {列表数据源} dataSourse 
 */
function renderPageNav(listTarget, navTarget, renderFunc, pageSize, dataSourse) {
  // 总页数
  const pageLength = Math.ceil(dataSourse.length / pageSize);

  //页面控制器
  const pageController = {
    cur: 0,
    toPage: function (index) {
      listTarget.innerHTML = '';
      for (let i = (index - 1) * pageSize; i < index * pageSize; i++) {
        if (dataSourse[i]) {
          listTarget.appendChild(renderFunc(dataSourse[i]));
        } else {
          break;
        }
      }
      this.cur = index;
      console.log(this.cur)
    },
    next: function () { this.toPage(this.cur + 1) },
    prev: function () { this.toPage(this.cur - 1) },
    start: function () { this.toPage(1) },
    end: function () { this.toPage(pageLength) }
  }
  // 页码按钮渲染
  const pageBTN = index => {
    const btn = document.createElement('b');
    btn.innerHTML = index;
    btn.onclick = () => pageController.toPage(index);
    return btn
  };

  // 第一页按钮
  const startBTN = document.createElement('b');
  startBTN.innerHTML = '《';
  startBTN.onclick = () => {
    pageController.start()
  }
  navTarget.appendChild(startBTN)

  // 上一页按钮
  const prevBTN = document.createElement('b');
  prevBTN.innerHTML = '<';
  prevBTN.onclick = () => {
    if (pageController.cur != 1)
      pageController.prev()
  }
  navTarget.appendChild(prevBTN)

  // 页面跳转按钮 
  const page = document.createElement('span');
  for (let i = 1; i <= pageLength; i++) {
    page.appendChild(pageBTN(i))
  }

  navTarget.appendChild(page)

  // 下一页按钮
  const nextBTN = document.createElement('b');
  nextBTN.innerHTML = '>';
  nextBTN.onclick = () => {
    if (pageController.cur != pageLength) {
      pageController.next()
    }
  }
  navTarget.appendChild(nextBTN)
  // 尾页按钮
  const endBTN = document.createElement('b');
  endBTN.innerHTML = '》';
  endBTN.onclick = () => {
    if (pageController.cur != pageLength) {
      pageController.end()
    }
  }
  navTarget.appendChild(endBTN)

}

列表项渲染函数

//渲染单个Item
function renderItem(item) {
  const aItem = document.createElement("div");
  const inner = `<div class='card'>
  <p class="card__text"> ${item.desc} </p>
  </div>`;
  aItem.innerHTML = inner;
  return aItem;
}

// 这里存后台发来的数据
var data = [
  {
    desc: "11111"
  },
  {
    desc: "22222"
  },
  {
    desc: "3333"
  },
  {
    desc: "44444"
  },
  {
    desc: "55555"
  },
  {
    desc: "66666"
  },
  {
    desc: "77777"
  },
  {
    desc: "8888"
  },
  {
    desc: "9999"
  },
  {
    desc: "aaaaa"
  }
];

// 列表渲染目标节点
const listTarget = document.querySelector("#target");
// 导航栏渲染目标节点
const navTarget = document.querySelector("#nav");

运行分页器函数

renderPageNav(listTarget, navTarget, renderItem, 3, data);

JS简单实现分页显示

1.在 HTML文件建立列表目标节点和翻页器目标节点

2.JS

分页控制器函数封装

列表项渲染函数

运行分页器函数

猜你喜欢