jQuery插件simplePagination的使用方法示例

使用jQuery插件simplePagination，可以方便地实现分页功能。下面就是simplePagination的使用方法示例的完整攻略：

安装simplePagination插件

要使用simplePagination，需要先从GitHub上下载该插件，并将其添加到你的HTML网页中。可以直接使用CDN链接：

<script src="https://cdn.jsdelivr.net/npm/simple-pagination.js@2.1.0/jquery.simplePagination.js"></script>

或者下载文件后在HTML网页中导入：

<script src="jquery.simplePagination.js"></script>

创建HTML结构

在HTML页面中创建分页所需的基本结构，包括一个“列表容器元素”和一个“分页导航容器元素”。其中，“列表容器元素”通常是一个<ul>元素，“分页导航容器元素”可以是一个<div>或<nav>元素。示例HTML结构如下：

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

准备数据

为列表容器元素准备数据。在本示例中，我们使用一个长度为20的数组作为数据：

var items = [
  "John",
  "Paul",
  "George",
  "Ringo",
  "Mick",
  "Keith",
  "Charlie",
  "Ron",
  "Jimmy",
  "Robert",
  "John",
  "Paul",
  "George",
  "Ringo",
  "Mick",
  "Keith",
  "Charlie",
  "Ron",
  "Jimmy",
  "Robert"
];

初始化simplePagination插件

在DOM加载完成后，在jQuery中初始化simplePagination插件：

$(document).ready(function() {
  // 设置每页显示的内容数量
  var itemsPerPage = 5;

  // 初始化分页导航
  $("#pagination").pagination({
    items: items.length,
    itemsOnPage: itemsPerPage,
    onPageClick: function(pageNumber) {
      // 根据页码渲染列表
      var startIndex = (pageNumber - 1) * itemsPerPage;
      var endIndex = startIndex + itemsPerPage - 1;
      renderList(items.slice(startIndex, endIndex + 1));
    }
  });

  // 渲染初始列表
  renderList(items.slice(0, itemsPerPage));
});

function renderList(listItems) {
  var list = $("#list");
  list.empty();
  for (var i = 0; i < listItems.length; i++) {
    var item = $("<li>").text(listItems[i]);
    list.append(item);
  }
}

以上代码中，我们为simplePagination插件提供了必要的配置：总数据项数（items）、每页显示的内容数量（itemsOnPage）以及在分页导航上点击某一页后的回调函数（onPageClick）。在回调函数中，根据所点击的页码重新渲染数据列表。点击页码时，simplePagination插件会自动调用回调函数。

我们还定义了用于渲染列表的renderList函数。该函数接收一个数组作为参数，并根据数组渲染HTML元素，然后将HTML元素添加到页面的列表容器元素中。

案例1：添加搜索过滤器

如果希望添加搜索过滤器，可以通过向simplePagination插件的配置对象中添加onInit属性和onChange属性，来实现所有更新了内容的过滤器。

$(document).ready(function() {
  // 设置每页显示的内容数量
  var itemsPerPage = 5;

  // 初始化分页导航
  $("#pagination").pagination({
    items: items.length,
    itemsOnPage: itemsPerPage,
    onPageClick: function(pageNumber) {
      // 根据页码渲染列表
      var startIndex = (pageNumber - 1) * itemsPerPage;
      var endIndex = startIndex + itemsPerPage - 1;
      renderList(items.slice(startIndex, endIndex + 1));
    },
    onInit: function() {
      // 初始化搜索
      search();
    },
    onChange: function() {
      // 搜索每次更新时重新渲染列表
      search();
    }
  });

  // 渲染初始列表
  renderList(items.slice(0, itemsPerPage));

  // 搜索功能
  function search() {
    // 获取搜索关键字
    var keywords = $("#search-input").val().toLowerCase();

    // 过滤数据并渲染列表
    var filteredItems = items.filter(function(item) {
      return item.toLowerCase().includes(keywords);
    });
    $("#pagination").pagination("updateItems", filteredItems.length);
    renderList(filteredItems.slice(0, itemsPerPage));
  }

  // 监听搜索输入框
  $("#search-input").on("input", function() {
    search();
  });
});

该案例从simplePagination插件的配置对象中添加了两个属性：onInit和onChange。当simplePagination插件初始化完成后，onInit中的回调函数会自动调用。在该回调函数中，我们初始化搜索功能，即为搜索输入框添加input事件监听器，并在回调函数中根据输入框中的文本过滤数据。每次搜索更新时，simplePagination插件也会自动调用onChange中的回调函数。在该回调函数中，我们将更新后的数据设置为simplePagination插件的新数据项（updateItems），并重新渲染列表。

案例2：自定义样式

我们可以通过CSS来自定义simplePagination插件的样式。下面展示一些常用的CSS类名以及它们的默认样式：

类名	描述
.pagination	定义分页导航容器元素的样式。
.simple-pagination	包裹着所有分页导航元素的容器元素的样式。
.active	添加到当前页码元素（<a>标签）的样式，以指示其为当前页码。
.disabled	添加到已禁用的页码元素（<a>标签）的样式。
.pagination-details	位于分页导航容器元素的左边，用于显示当前页码和数据总数。
.pagination-pages	位于分页导航容器元素的中间，用于显示可点击的页码列表。
.pagination-prev	位于分页导航容器元素的右侧，用于显示上一页的按钮。
.pagination-next	位于分页导航容器元素的右侧，用于显示下一页的按钮。
.pagination-ellipsis	添加到分页导航容器元素中间的省略号元素（<span>标签）的样式，用于代表未在列表中显示的更多页码。
.pagination-link-number	显示在“.pagination-pages”列表中的页码（<a>标签）的样式。

例如，下面是一些CSS代码，可以将simplePagination插件的分页导航样式更改为白色背景、黑色边框和圆角：

.simple-pagination {
  display: flex;
  justify-content: center;
  background-color: white;
  border: 1px solid black;
  border-radius: 15px;
}

.pagination-pages a {
  color: black;
  text-decoration: none;
  border-right: 1px solid black;
  padding: 5px 10px;
}

.pagination-pages a:last-child {
  border-right: none;
}

.active {
  background-color: black;
  color: white;
}

.pagination-prev,
.pagination-next {
  color: black;
  text-decoration: none;
  padding: 5px 10px;
}

.pagination-details {
  margin-right: auto;
  font-size: 14px;
  padding: 5px 10px;
}

.pagination-pages {
  display: flex;
  justify-content: center;
}

.pagination-ellipsis {
  font-size: 16px;
  padding: 5px 10px;
}

.pagination-link-number {
  text-decoration: none;
  cursor: pointer;
}

这些类名可以根据需求自行修改，以达到自定义样式的效果。

综上，simplePagination的使用方法示例已经讲解完毕。需要注意的是，由于simplePagination插件依赖于jQuery，因此在使用前需要先确保已经正确导入jQuery库文件。