封装好的javascript前端分页插件pagination

下面我将介绍一下使用封装好的JavaScript前端分页插件pagination的完整攻略。

一、安装

可通过npm安装：

npm install pagination-js

或者直接在HTML中引入：

<script src="pagination.min.js"></script>

二、使用

1. 初始化

要使用pagination，首先需要初始化：

var pagination = new Pagination(container, options);

其中，container是插件容器，即pagination要显示的位置，可以是DOM元素或者CSS选择器字符串。

options是可选的配置项，具体包括：

• dataSource：数据源，必须是一个数组，即要分页的数据
• perPage：每页显示多少条数据，默认为10
• sortKey：排序关键字，默认为null，即不进行排序
• sortOrder：排序顺序，默认为asc
• pageRange：一次显示多少页码，默认为5
• hidePrevious：是否隐藏上一页按钮，默认为false
• hideNext：是否隐藏下一页按钮，默认为false
• hidePageNumbers：是否隐藏页码，默认为false
• callback：每次翻页时的回调函数

2. 使用示例

以下是两个使用pagination的示例：

示例一：显示电影列表

假设有一个电影列表，我们需要每页显示20部电影，首先将数据源转换成数组形式，然后将其传入pagination，并将pagination容器加入页面中：

<div id="movies"></div>

<script>
var data = [
  { title: '电影1', director: '导演1', year: 2000 },
  { title: '电影2', director: '导演2', year: 2001 },
  // ...
];

var options = {
  dataSource: data,
  perPage: 20,
  callback: function(data, pagination) {
    // 渲染电影列表
    var html = '';
    data.forEach(function(movie) {
      html += '<div>' +
              '<span>' + movie.title + '</span>' +
              '<span>' + movie.director + '</span>' +
              '<span>' + movie.year + '</span>' +
              '</div>';
    });
    document.querySelector('#movies').innerHTML = html;
  }
};

var pagination = new Pagination('#movies', options);
</script>

这样就可以在页面上显示电影列表，并自动分页了。

示例二：分页展示搜索结果

假设有一个搜索框，用户输入关键字后会返回搜索结果，我们需要将搜索结果分页展示，并在用户翻页时发送请求。

首先在页面中加入一个搜索框和一个结果容器：

<input id="keyword" type="text">
<button id="search">搜索</button>
<ul id="results"></ul>
<div id="pagination"></div>

然后在JavaScript中监听搜索事件，获取用户输入的关键字并发送请求：

document.querySelector('#search').addEventListener('click', function() {
  var keyword = document.querySelector('#keyword').value;
  var url = 'search.php?keyword=' + encodeURIComponent(keyword);
  // 发送请求并获取搜索结果
  // 处理数据，并将其转换成数组形式
  var data = preprocessData(responseData);
  // 将搜索结果分页展示
  pagination.update({
    dataSource: data,
    callback: function(data, pagination) {
      // 渲染搜索结果
      var html = '';
      data.forEach(function(item) {
        html += '<li>' + item.title + '</li>';
      });
      document.querySelector('#results').innerHTML = html;
    }
  });
});

在用户输入关键字后，我们会获取到服务器返回的原始数据responseData，需要将其预处理并转换成pagination可接受的数组形式。

当用户翻页时，pagination会自动调用回调函数，并将当前页的数据传递给回调函数。

在回调函数中，我们可以将搜索结果渲染到页面中。

三、其他方法

除了以上提到的初始化和更新方法，pagination还提供了一些其他方法：

• next()：跳转到下一页
• prev()：跳转到上一页
• go(page)：跳转到指定页，page是页码
• disable()：禁用pagination
• enable()：启用pagination
• destroy()：销毁pagination

具体用法可以查看官方文档。

以上是封装好的JavaScript前端分页插件pagination的完整攻略，希望对你有所帮助。