簡易增量導覽 (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 上取得,並且非常歡迎發送 Pull Request!
- 此外掛程式:simple_incremental_bootstrap.js
- 完整 DataTables 外掛程式儲存庫:DataTables/Plugins