jQuery UI

jQuery UI 是一個流行的 Javascript 小工具套件,例如 DatePickerAutoCompleteDialog。雖然 jQuery UI 並不像是 BootstrapFoundation 一樣的 CSS 框架,但它確實透過其 ThemeRoller 元件為其小工具提供通用的樣式框架。

DataTables 提供整合檔案,可用於讓表格的樣式與其他 jQuery UI 小工具相同,如果您已在使用 jQuery UI,則可確保您的網站/應用程式上的元件外觀一致。DataTables 使用 ThemeRoller 提供的 CSS,並加入用於設定 DataTables 增強表格樣式的資訊,因為 ThemeRoller 沒有提供這些資訊,因此您可以像使用預設 DataTables CSS 一樣使用相同的樣式類別

安裝

將 jQuery UI 整合到 DataTables 及其擴充功能的最簡單方式是使用 DataTables 下載產生器。這是一個點擊式介面,可讓您選擇要使用的樣式和軟體。

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

手動安裝

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

DataTables

主要的 DataTables 檔案名稱為 dataTables.js。還有一個用於 DataTables 支援的各種樣式函式庫的樣式整合檔案,其格式為 dataTables.{style}.js (例如,jQuery UI 為 dataTables.jqueryui.js)。

這兩個 Javascript 檔案都應包含在內 - 主要檔案用於包含基本 DataTables 功能,而樣式檔案則設定樣式函式庫的適當預設值。

對於 CSS,只需包含單一檔案,因為樣式函式庫將為表格提供核心樣式選項。CSS 檔案的格式為 dataTables.{style}.css (例如,jQuery UI 為 dataTables.jqueryui.css)。

擴充功能

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

對於 Javascript,我們有:dataTables.{extension}.js{extension}.{style}.js - 例如,對於 Buttons,要包含的檔案是 dataTables.buttons.jsbuttons.jqueryui.js - 同樣,包含核心函式庫和設定適當預設值的樣式檔案。

就 CSS 而言,只需包含單一檔案 - 用於所使用樣式的適當檔案 - 例如 {extension}.{style}.css - buttons.jqueryui.css

請注意,並非所有擴充功能都需要 Javascript 和/或 CSS 才能設定樣式函式庫。如果儲存庫或套件中沒有樣式函式庫,則不需要它們。

詳細資訊

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

範例

以下顯示一個由 jQuery UI 設定樣式的 DataTable 範例。

在新視窗中檢視範例。

舊版支援

DataTables 實際上透過 jQueryUI 選項,將 jQuery UI 支援直接整合到核心 Javascript 中。然而,此選項已在 DataTables 1.10 中棄用,並將在 1.11 中移除,改用本頁所述的方法,該方法更模組化,並符合為其他 CSS 框架(例如 BootstrapFoundation)提供整合的方式。因此,建議您使用此處提供的 jQuery UI 整合檔案,而不是 jQueryUI 選項。