Bootstrap 5

Bootstrap 5 是經典 CSS 框架的下一代版本，可讓您快速輕鬆地建構具有統一外觀的使用者介面。 DataTables 提供與 Bootstrap 5 的完整整合，讓您的 DataTables 與您網站的其餘部分具有相同的外觀和風格。

Bootstrap 5 為 HTML 表格提供了多種樣式選項，讓您可以靈活地控制表格，同時確保它們看起來非常時尚。 DataTables/Bootstrap 整合確保您可以使用所有這些功能，以及 DataTables 對純 HTML 表格的增強功能。

安裝

包含 DataTables 及其擴充功能的 Bootstrap 5 整合最簡單的方法是使用 DataTables 下載產生器。這是一個點擊式介面，可讓您選擇要使用的樣式和軟體。

下載產生器可選擇將所需檔案託管在 DataTables CDN 上、下載可在本機託管的套件，或使用 NPM 等套件管理員。

手動安裝

如果您希望使用 DataTables Git 儲存庫或下載套件，而不是使用下載產生器，DataTables 及其所有擴充功能都共用類似的檔案命名慣例，可用於包含所需檔案。

DataTables

主 DataTables 檔案的名稱為 dataTables.js，使用大多數 jQuery 外掛程式通用的格式。 還有一個用於 DataTables 支援的各種樣式函式庫的樣式整合檔案，其格式為 dataTables.{style}.js （例如，針對 Bootstrap 5 為 dataTables.bootstrap5.js）。

這兩個 Javascript 檔案都應包含 – 主檔案包含基本的 DataTables 功能，樣式檔案則會根據樣式函式庫設定適當的預設值。

對於 CSS，只應包含單一檔案，因為樣式函式庫會提供表格的核心樣式選項。 CSS 檔案的格式為 dataTables.{style}.css （例如，針對 Bootstrap 5 為 dataTables.bootstrap5.css）。

擴充功能

上述檔案命名慣例也適用於擴充功能。

對於 Javascript，我們有：dataTables.{extension}.js 和 {extension}.{style}.js – 例如，對於 Buttons，要包含的檔案是 dataTables.buttons.js 和 buttons.bootstrap5.js – 同樣，包含核心函式庫和樣式檔案以設定適當的預設值。

在 CSS 的情況下，只應包含單一檔案 – 適用的樣式檔案 {extension}.{style}.css – 例如 buttons.bootstrap5.css。

請注意，並非所有擴充功能都需要 Javascript 和/或 CSS 來處理樣式函式庫。 如果樣式函式庫不存在於儲存庫或套件中，則不需要這些檔案。

詳細資訊

如果您對 DataTables 檔案命名慣例的詳細資訊感興趣，請參閱這份技術說明。

範例

此處提供由 Bootstrap 設定樣式的 DataTable 範例：可在此處取得。