bootstrap分页小部件

一个简单、轻量级、高度可定制的分页库，可与最新的Bootstrap5框架配合使用。

<div id="pagination"></div>

需要分页的条目

const items = [
      "item 1",
      "item 2",
      "item 3",
      // ...
];

初始化

const pagination = easyPagination({
      // items
      items,
      // number of items per page
      rows: 5,
      // pagination container
      buttonsWrapper: "#pagination",
      // handle items here
      handlePaginatedItems: (items) => {
        const list = document.getElementById("list");
        list.innerHTML = "";
        items.forEach((item) => {
          list.innerHTML += `<li class="list-group-item">${item}</li>`;
        });
      }
});

在刚刚创建的分页里显示分页按钮

pagination.paginate();

还可以自定义样式

const pagination = easyPagination({
      buttonClass: "page-link",
      nextClass: "page-link",
      prevClass: "page-link",
      nextText: "next >",
      prevText: "< prev",
      activeClass: "active",
});

更新分页数字

pagination.changeRows(20);

更新条目

pagination.changeItems(newItems);

上一页和下一页

pagination.next();
pagination.prev();