20. 示例运行时选项

DataTables 示例具有可在示例页面右上角的下拉选项列表中控制的很多运行时选项。可用的选项包括

• Javascript 初始化目标
• 样式框架
• 主题（浅色/暗色模式）

在特定条件下，选定的选项可能不可用。在这种情况之下，系统将显示一个警告图标，并且会在下面每一部分进行说明。

初始化目标

大多数示例具有基于 jQuery 或者纯 Vanilla Javascript 的初始化代码。我们这么做是为了尊重您可能更喜欢在没有支持的 DOM 库的情况下编写 Javascript，或者您可能想要使用 jQuery 或任何其他 DOM 和事件库。该示例将运行选定的代码类型，它还将显示在页面上（通常位于演示 DataTable 的下方）。

• jQuery 目标 - 此代码将使用 jQuery 方法，特别是用于 DOM 操作和事件处理。它通过 ES3 代码面向较旧的浏览器。
• Vanilla JS 目标 - 使用 Javascript 的较新功能（ES6+），例如箭头函数和迭代器。除了 DataTables 或页面上显示的软件提供的功能之外，不使用 DOM 或事件库。

请注意，无论初始化样式如何，都会加载 jQuery，因为它是 DataTables 的依赖项。如果您不想写任何 jQuery 代码，则无需亲自编写！

警告图标

如果您在选择初始化目标时看到三角形内的警告感叹号这意味着没有匹配的代码，而是使用其他初始化。例如，如果某个示例具有 jQuery 初始化，但没有 Vanilla JS，则始终会使用基于 jQuery 的代码。相反的情况也可能是这样。

样式框架

DataTables 及其扩展可以使用许多不同的样式框架设置样式，目的是如果您已经在使用一个特定的框架，您可以让 DataTables 快速轻松地适应您网站/应用程序的现有外观和感觉。如果您正在启动一个新项目，您可以选择您觉得最吸引人的样式框架！

示例有一个下拉列表，您可以从中选择支持的样式框架，以便查看示例在每个框架中的外观。

警告图标

虽然大多数示例允许使用任何样式框架，但有些示例被锁定到特定的框架。例如，DataTables 和每个扩展针对每个支持的样式框架都有一个专门的示例 - 这些示例被锁定（也就是说，针对 Bootstrap 3 的特定演示被 Bulma 设置样式毫无意义！）。

主题

在 DataTables 支持的样式框架中，默认 DataTables 样式和 Bootstrap 5（5.3+）都提供暗模式变体。此选项提供在浅色模式和深色模式之间切换的能力。您还可以根据系统首选项自动检测。

警告图标

当前只有 DataTables 和 Bootstrap 5（5.3+）提供暗模式选项。如果在任何其他样式框架中选择了暗模式，将显示三角形中的警告感叹号。