简单增量导航(Bootstrap)

显示前进/后退按钮以及所有已知页码。

这种分页样式显示“上一个/下一个”按钮,以及至少使用[下一页> ]按钮访问过一次的“已知”页面的页码。最初仅显示上一个/下一个按钮(上一个最初处于禁用状态)。

[<上一个] [下一页>]

当用户使用[下一页> ]按钮浏览页面时,导航会显示前几页的页码。例如,当用户到达第 2 页时,会显示页码 1 和 2

[<上一个] 1 2 [下一页>]

当用户到达第 4 页时,会显示页码 1、2、3 和 4

[<上一个] 1 2 3 4 [下一页>]

当用户返回时,分页将记住到达的最后一个页码,并且显示到最后一个已知页面的页码。例如,当用户返回到第 2 页时,仍然会显示页码 1、2、3 和 4

[<上一个] 1 2 3 4 [下一页>]

这种分页方式适合不会直接跳转到之前未曾打开的随机页面的用户。假设用户会通过[下一页> ]按钮发现新页面。此分页功能使用户可以轻松地来回切换到他们发现的任何页面。

主要优点:此分页支持常规的分页模式,并不需要服务器返回所有项的总数来计算最后一页和所有页码。这可能是巨大的性能优势,因为在服务器端处理模式下,服务器无需执行以下两个查询:- 一个用于获取将在当前页面上显示的记录,- 第二个用于获取总数以计算完整的分页。

如果没有第二个查询,页面加载时间可能会快 2 倍,尤其是在服务器可以快速获取前 100 条记录,但需要扫描整个数据库表来计算总数和最后一页的位置时。此分页样式是简单分页和完整分页之间合理的权衡。

使用

可以通过多种不同的方式获取和使用此插件。

浏览器

此插件可在 DataTables CDN 上获得

JS

然后,该插件将自动在全局 DataTables 实例上注册自身。如果您正在使用 AMD 加载器(如 Require.js),也可以使用此文件。

请注意,如果您正在使用多个插件,将插件组合成一个文件并将其托管在您自己的服务器上,而不是向 DataTables CDN 发出多个请求,这在性能方面可能是有益的。

NPM

插件都可以在 NPM 上找到(也可以与 Yarn 或任何其他 Javascript 包管理器一起使用),作为 datatables.net-plugins 软件包的一部分。要使用此插件,请先安装插件软件包

npm install datatables.net-plugins

ES 模块

然后,如果您正在使用 ES 模块,请导入 datatables.net、任何其他您需要的 DataTables 扩展以及插件。

import DataTable from 'datatables.net';
import 'datatables.net-plugins/pagination/simple_incremental_bootstrap.mjs';

CommonJS

如果您对 Node 使用 CommonJS 加载器(例如,对于较早版本的 Webpack 或非模块化 Node 代码),请使用以下方法来 require 插件

var $ = require('jquery');
var DataTable = require('datatables.net');
require('datatables.net-plugins/pagination/simple_incremental_bootstrap.js');

示例

$(document).ready(function() {
      $('#example').dataTable( {
          "pagingType": "simple_incremental_bootstrap"
      } );
  } );

版本控制

如果您对如何改进该插件有任何想法,或发现任何错误,可以在 GitHub 中找到它,并且非常欢迎提交请求!