基础

来自 Zurb 的Foundation是一个 CSS 框架,可快速开发复杂的网站,其特点是针对 HTML 页面的设计流程采用移动优先的方式。使用 Foundation 等 CSS 框架,您可以非常快速地创建一个界面统一且美观的界面。DataTables 可以直接与 Foundation 集成,以确保它完全符合您的网站/应用程序的流程!

Foundation 提供了多种选项来设置 HTML 表格的样式。DataTables/Foundation 集成可确保您既可以使用所有这些功能,又可以使用 DataTables 对纯 HTML 表格所做的增强。

安装

为 DataTables 及其扩展包含 Foundation 集成的最简单方法是使用DataTables 下载构建器。这是一个点击式界面,可让您选择要使用的样式和软件。

下载构建器提供了以下选项:将所需文件托管在 DataTables CDN 上、下载您可以在本地托管的包,或使用 NPM 等包管理器。

手动安装

如果您希望使用 DataTables Git 代码库或下载包,而不是下载构建器,则 DataTables 及其所有扩展都使用相似的文件命名约定来包含所需文件。

DataTables

DataTables 主文件名为dataTables.js。DataTables 支持的各种样式库还有一个样式集成文件,其格式为dataTables.{style}.js(例如,Foundation 为dataTables.foundation.js)。

这两个 Javascript 文件都应包含在内 - 主文件包含基本 DataTables 功能,而样式文件则根据样式库的需要设置默认值。

对于 CSS,只应包含一个文件,因为样式库将为表格提供核心样式选项。CSS 文件的格式为dataTables.{style}.css(例如,Foundation 为dataTables.foundation.css)。

扩展

上述文件命名约定也适用于扩展

对于 Javascript,我们有:dataTables.{extension}.js{extension}.{style}.js - 例如,对于Buttons,要包含的文件是dataTables.buttons.jsbuttons.foundation.js - 再次包含核心库并样式文件以设置适当的默认值。

在 CSS 的情况下,只应包含一个文件 - 适合所用样式的相应文件 - 例如{extension}.{style}.css - buttons.foundation.css

请注意,并非所有扩展都要求 JavaScript 和/或 CSS 的样式库。如果样式库不存在于代码库或包中,则不需要它们。

详细信息

如果您有兴趣了解 DataTables 文件命名约定的详细技术内容,请阅读本技术注释

示例

以下是经 Foundation 美化的 DataTable 示例。

在新窗口中查看示例。