Bootstrap 3
Bootstrap 3 是一款 CSS 框架,可让您快速轻松地构建具有统一外观和感觉的用户界面。Bootstrap 和 DataTables 的集成非常简单,这样您功能齐全的数据表就能与您网站的其余部分保持相同的外观和感觉。
Bootstrap 3 为 HTML 表格样式提供了许多选项,从而为您提供了表格的灵活性,同时确保表格看起来非常简洁。DataTables/Bootstrap 集成可确保您能够使用所有这些功能以及 DataTables 对普通 HTML 表格所做的增强。
安装
将 Bootstrap 集成到 DataTables 及其扩展中的最简单方法是使用DataTables 下载生成器。这是一种点击式界面,可让您选择自己希望使用的样式和软件。
下载生成器有以下选项:将所需文件托管在 DataTables CDN 上、下载可本地托管的软件包,或使用 NPM 等程序包管理器。
手动安装
如果您希望使用 DataTables Git 存储库或下载软件包,而不是下载生成器,DataTables 及其所有扩展都遵循类似的文件命名约定,可用于包含所需的文件。
数据表
主 DataTables 文件名为 dataTables.js
。还有适用于 DataTables 支持的各种样式库的样式集成文件,其格式为 dataTables.{style}.js
(例如适用于 Bootstrap 的 dataTables.bootstrap.js
)。
这两个 Javascript 文件都应包括在内 - 主文件以包含基本的 DataTables 功能,而样式文件以设置样式库的适当默认值。
对于 CSS,只应包含单个文件,因为样式库将为表格提供核心样式选项。CSS 文件的格式为 dataTables.{style}.css
(例如适用于 Bootstrap 的 dataTables.bootstrap.css
)。
扩展
上述文件命名约定也适用于扩展。
对于 Javascript,我们有:dataTables.{extension}.js
和 {extension}.{style}.js
- 例如对于Buttons,要包含的文件为 dataTables.buttons.js
和 buttons.bootstrap.js
- 同样包括核心库和样式文件以设置适当的默认值。
在 CSS 的情况下,只应包含单个文件 - 适用于正在使用的样式的适当文件 - {extension}.{style}.css
- 例如 buttons.bootstrap.css
。
请注意,并非所有扩展都需要样式库的 Javascript 和/或 CSS。如果样式库不存在于存储库或软件包中,则不需要它们。
详细信息
如果您对 DataTables 文件名称约定的枯燥细节感兴趣,请参阅此技术说明。
示例
以 Bootstrap 3 样式设置的 DataTable 的示例 可在此处找到。