jQuery UI
jQuery UI 是一款流行的 Javascript 小部件套件,比如 DatePicker、AutoComplete 和 Dialog。虽然 jQuery UI 并不是与 Bootstrap 或 Foundation 相同意义上的 CSS 框架,但它确实通过其 ThemeRoller 组件为其小部件提供了一个通用的样式框架。
DataTables 提供了可用于对表格应用与其他 jQuery UI 小部件相同的样式的集成文件,确保了你在使用 jQuery UI 时网站/应用中的组件看上去和感觉上具有一致性。DataTables 通过 ThemeRoller 提供的 CSS 增强了样式信息以对增强的 DataTables 表格进行样式设置,因为 ThemeRoller 未提供此信息,因此你可以使用与默认 DataTables CSS 相同的 样式类。
安装
在 DataTables 及其扩展中包含 jQuery UI 集成的最简单方法是使用 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.js
和 buttons.jqueryui.js
- 同样,将其包含在核心库中并将样式文件设置为适当的默认值。
对于 CSS,应只包含一个文件,即要使用的样式的相应文件 {extension}.{style}.css
- 例如 buttons.jqueryui.css
。
请注意,并非所有扩展名都需要样式库的 Javascript 和/或 CSS。如果样式库没有存在于 repo 或程序包中,则无需这些样式库。
详细信息
如果你对 DataTables 文件命名约定的枯燥细节感兴趣,请参阅 这个技术说明。
示例
下面显示了由 jQuery UI 设置样式的一个 DataTable 的示例。
旧版本支持
实际上,DataTables 已经将 jQuery UI 支持通过 jQueryUI
选项直接集成到核心 Javascript 中。但是,此选项已在 DataTables 1.10 中弃用,并且将在 1.11 中为了在其他 CSS 框架(例如 Bootstrap 和 Foundation)中提供更模块化匹配的集成方法而删除。因此,推荐你使用此处提供的 jQuery UI 集成文件,而不是 jQueryUI
选项。