简单增量导航(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 上获得
然后,该插件将自动在全局 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 中找到它,并且非常欢迎提交请求!
- 该插件:simple_incremental_bootstrap.js
- 完整 DataTables 插件存储库:DataTables/Plugins