角材料7-分页器

简介

角材料7-分页器是一款用于在前端页面中生成分页器的 JavaScript 组件。可以方便地用于各种需要分页的情境，如新闻列表、商品列表等。

主要功能

• 生成分页器
• 支持自定义每页显示数量和总页数
• 支持自定义页码样式
• 支持自定义页码点击事件

安装

你可以通过以下方式获取角材料7-分页器：

通过 npm 安装

npm install @jiaogao/paginator

通过 CDN 引入

<script src="https://cdn.jsdelivr.net/npm/@jiaogao/paginator"></script>

使用

初始化

const paginator = new Paginator({
  container: document.querySelector('#paginator'),
  currentPage: 1, // 当前页码，可选，默认为 1
  totalItems: 1000, // 总数据量，必填
  itemsPerPage: 10, // 每页显示数量，可选，默认为 10
  visiblePages: 5, // 可见页码数，可选，默认为 5
  onPageChange: function (pageNum) {
    console.log('当前页码：', pageNum);
  }
});

更新

paginator.update({
  currentPage: 2, // 更新当前页码
  totalItems: 2000 // 更新总数据量
});

销毁

paginator.destroy();

样式

角材料7-分页器提供了默认的样式，你也可以自定义样式。

以下是默认样式的部分代码：

.jgm-paginator {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jgm-paginator li {
  display: inline-block;
  margin: 0 4px;
  padding: 0;
}

.jgm-paginator a {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 50%;
}

.jgm-paginator .active a,
.jgm-paginator a:hover {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}

API

Paginator(options)

初始化分页器。

• options.container: HTMLElement: 分页器容器，必填。
• options.currentPage: number: 当前页码，可选，默认为 1。
• options.totalItems: number: 总数据量，必填。
• options.itemsPerPage: number: 每页显示数量，可选，默认为 10。
• options.visiblePages: number: 可见页码数，可选，默认为 5。
• options.onPageChange: function(pageNum): 页码点击回调函数，可选。

update(options)

更新分页器。

• options.currentPage: number: 当前页码，可选。
• options.totalItems: number: 总数据量，可选。

destroy()

销毁分页器。