jQuery UI

jQuery UI 是流行的小部套件,例如 DatePickerAutoCompleteDialog。 尽管jQuery UI和 BootstrapFoundation的含义不同,但它确实通过其 ThemeRoller组件为其小部件提供了通用的的样式框架。

如果你已经在使用jQuery UI了,Datatables提供了集成文件,可用于以其他jQuery UI小部件相同的方式设置样式表, 以确保你的网站中的各个组件外观一致。 由于ThemeRoller不提供此信息,因此, Datatables增强了ThemeRoller提供的CSS样式表信息, 因此,你可以使用与默认Datatables CSS相同的 样式类

安装(Installation)

包括用于Datatables及其扩展的Bootstrap集成的最简单方法就是使用 Datatables下载构建器 。 在这个功能下,你可以选择你要使用的样式或者是扩展功能。

下载构建器,可以将所需的文件托管在Datatables CDN上或者下载到本地。

手动安装(Manual Installation)

如果你希望使用Datatables Git仓库 或者下载包,而不是通过Datatables下载构建器, 则Datatables及其所有扩展名都共享类似的文件命名约定,该约定可用于包括所需的文件。

DataTables

主Datatables文件名称为 jquery.dataTables.js ,使用大多数jQuery插件通用的格式。 还有一个用于Datatables支持的各种样式库的样式集成文件,其格式为 dataTables.{style}.js( 比如jQuery UI的就是 dataTables.jqueryui.js)

这两个JavaScript文件都应该包含在内-包含基本Datatables功能的主文件和用于设置合适于样式库的默认值的样式文件。

对于CSS,应仅包含一个文件,因为样式库将提供表格的核心样式选项。CSS文件的格式为 dataTables.{style}.css (比如jQuery UI的就是 dataTables.jqueryui.css )

Extensions

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

对于JavaScript,我们保留两个部分的名称,并且删除jQuery,所以我们有: dataTables.{extension}.js{extension}.{style}.js。 比如 Buttons扩展功能,包括 dataTables.buttons.jsbuttons.jqueryui.js,还包含核心库和用于设置适当默认值的样式文件。

如果是CSS文件,应当仅包含一个文件,extension.{style}.css,比如 buttons.jqueryui.css

注意,并非所有的扩展都需要样式库的JavaScript和/或者CSS。如果仓库或软件包中没有样式库,则不需要他们。

Details

如果你对Datatables文件名约定的详细信息感兴趣,请参与此 技术文档

例子

下面是基于jQuery UI的Datatables示例:在新的页面查看此示例

旧版本支持(Legacy support)

Datatables实际上具有通过jQueryUI选项直接集成到核心JavaScript中的jQuery UI支持。 但是此选项在Datatables1.10中已弃用,并将在Datatables1.11中删除,以支持此页面上描述的方法, 该方法更具模块化,并且与其他CSS框架(如Bootstrap和Foundation)提供集成方式相匹配。 因此,建议你使用此处提供的jQuery UI集成文件,而不是jQueryUI选项。

http://datatables.net/manual/styling/jqueryui

Translation from DataTables.net, with permission