20. 範例執行期選項

DataTables 範例在範例頁面的右上角有一個下拉選項清單，可以使用它來控制一些執行期選項。可用的選項包括

Javascript 初始化目標
樣式框架
主題 (淺色 / 深色模式)

在某些情況下，所選的選項可能無法使用。如果發生這種情況，將會顯示一個警告圖示，並在下面的每個章節中說明。

初始化目標

大多數範例都有基於 jQuery 或原生 Javascript 的初始化程式碼。這是為了讓您可以選擇不使用輔助 DOM 函式庫來編寫 Javascript，或者您可能想使用 jQuery 或任何其他 DOM 和事件函式庫。範例將會執行所選的程式碼類型，也會顯示在頁面上 (通常在示範 DataTable 下方)。

jQuery 目標 - 此程式碼將會使用 jQuery 方法，特別是用於 DOM 操作和事件處理。它的目標是使用 ES3 程式碼的舊瀏覽器。
原生 JS 目標 - 使用 Javascript (ES6+) 的較新功能，例如箭頭函式和迭代器。不使用 DOM 或事件函式庫，除了 DataTables 或頁面上顯示的軟體提供的那些函式庫。

請注意，無論初始化樣式為何，jQuery 都會載入，因為它是 DataTables 的相依性。如果您不想，您不需要自己編寫任何 jQuery 程式碼！

警告圖示

如果您在所選的初始化目標看到三角形中的警告驚嘆號，表示沒有相符的程式碼，將會改用其他初始化方式。例如，如果範例有 jQuery 初始化，但沒有原生 JS，則永遠會使用基於 jQuery 的程式碼。反之亦然，也是有可能發生的情況。

樣式框架

DataTables 及其擴充功能都可以透過許多不同的樣式框架進行樣式設定，目的是如果您已經在使用特定的框架，就可以讓 DataTables 快速且輕鬆地與您網站/應用程式現有的外觀和風格相符。如果您要開始一個新專案，您可以選擇您覺得最吸引人的樣式框架！

範例有一個下拉選單，可讓您從支援的樣式框架中進行選擇，以便您查看每個框架的範例外觀。

警告圖示

雖然大多數範例允許使用任何樣式框架，但有些範例鎖定為特定的框架。例如，DataTables 和每個擴充功能都有一個針對每個支援的樣式框架的專用範例 - 這些範例是鎖定的 (也就是說，Bootstrap 3 特定的示範使用 Bulma 樣式將沒有意義！)。

主題

在 DataTables 支援的樣式框架中，預設 DataTables 樣式和 Bootstrap 5 (5.3+) 都提供深色模式變體。此選項提供在淺色和深色模式之間切換的功能。也可以根據您的系統偏好設定自動偵測。

警告圖示

目前只有 DataTables 和 Bootstrap 5 (5.3+) 提供深色模式選項。如果使用任何其他樣式框架選取深色模式，將會顯示三角形中的警告驚嘆號。