Datatables样式

目录

1.说明

2.DataTables示例

2.1 基本样式

2.2 基本样式-无样式类

2.3 单元格边框

2.4 紧凑型样式

2.5 悬停样式

2.6 列的顺序

2.7 行顶部和底部边框 

2.8 行条纹样式

2.9 使用Bootstrap 3样式

2.10 使用Bootstrap 4样式

2.11 使用Bootstrap 5样式

2.12 使用Foundations的表样式

2.13 Fomantic-UI

 2.14 Bulma

2.15 jQuery UI ThemeRoller

2.16 Material Design

2.17 UIKit 3

---

1.说明

本文展示设置数据表样式的基础示例。DataTables提供了一个易于定制的核心样式表，它具有许多功能，您可以根据需要启用或禁用这些功能。此外，还有许多集成包可用于将DataTables安装到使用一些流行CSS库（如Twitter Bootstrap和Foundation）的站点中。

2.DataTables示例

2.1 基本样式

cell-border——带边框的单元格；

compact ——通过减少单元格填充来提高数据密度；

hover——悬停在上方时高亮显示一行；

order-column —— 突出显示当前正在排序的列中的单元格；

row-border ——带边框的行 ；

stripe ——斑马条纹行； 

display——指定条带悬停顺序列行边界作为表类名的快捷方式

脚本：

    <script>
		$(document).ready(function () {
			$('#example').DataTable();
		});
    </script>

html代码：

在table表单元素设置引用的class样式，如下面的display类

<table id="example" class="display" style="width:100%">
</table>

2.2 基本样式-无样式类

此示例显示了使用的基本DataTables样式文件，没有使用任何其他要素样式类。

脚本：

    <script>
		$(document).ready(function () {
			$('#example').DataTable();
		});
    </script>

html代码：

在table表单元素不引用的class样式

<table id="example" class="" style="width:100%">
</table>

2.3 单元格边框

此示例显示了仅指定了单元格边界类的DataTables，从而在各个单元格之间显示边框。

脚本：

    <script>
		$(document).ready(function () {
			$('#example').DataTable();
		});
    </script>

html代码：

在table表单元素引用cell-border类样式

<table id="example" class="cell-border" style="width:100%">
</table>

效果：

2.4 紧凑型样式

compact类减少了默认样式中的空白空间，增加了屏幕上的信息密度。

脚本：

    <script>
		$(document).ready(function () {
			$('#example').DataTable();
		});
    </script>

html代码：

在table表单元素引用compact类样式

<table id="example" class="display compact" style="width:100%">
</table>

效果：

2.5 悬停样式

此示例显示的DataTables的样式在鼠标悬停在某行上时突出显示该行。

脚本：

    <script>
		$(document).ready(function () {
			$('#example').DataTable();
		});
    </script>

html代码：

在table表单元素引用hover类样式

<table id="example" class="hover" style="width:100%">
</table>

效果：

2.6 列的顺序

此示例显示指定了order列类的DataTables，每一列的行数据都按照字符顺序排序。

脚本：

    <script>
		$(document).ready(function () {
			$('#example').DataTable();
		});
    </script>

html代码：

在table表单元素引用order-column类样式。

<table id="example" class="order-column" style="width:100%">
</table>

效果：

2.7 行顶部和底部边框 

这个示例指定了行边界类的DataTables，行的顶部和底部边框。

脚本：

    <script>
		$(document).ready(function () {
			$('#example').DataTable();
		});
    </script>

html代码：

在table表单元素引用row-border类样式。

<table id="example" class="row-border" style="width:100%">
</table>

2.8 行条纹样式

此示例指定了stripe类的DataTables，行使用不同的颜色交替显示。

脚本：

    <script>
		$(document).ready(function () {
			$('#example').DataTable();
		});
    </script>

html代码：

在table表单元素引用stripe类样式。

<table id="example" class="stripe" style="width:100%">
</table>

效果：

2.9 使用Bootstrap 3样式

DataTables可以使用Bootstrap的表样式选项与Bootstrap 3样式，DataTables的Bootstrap集成还为DataTables中的分页控件提供了一个渲染器，以确保表的分页也由Bootstrap统一样式。

与上面8个例子不同之处，需要引入3.3.7版本dataTables.bootstrap.min.js脚本以及相应的bootstrap.min.css、dataTables.bootstrap.min.css样式。

脚本：

    <script>
		$(document).ready(function () {
			$('#example').DataTable();
		});
    </script>

html代码：

在table表单元素引用table table-striped table-bordered样式。

<table id="example" class="table table-striped table-bordered" style="width:100%">
</table>

效果：

2.10 使用Bootstrap 4样式

与2.9的例子一样，DataTables也可以使用Bootstrap的表样式选项与Bootstrap 4样式。

脚本：

    <script>
		$(document).ready(function () {
			$('#example').DataTable();
		});
    </script>

html代码：

在table表单元素引用table table-striped table-bordered样式。

<table id="example" class="table table-striped table-bordered" style="width:100%">
</table>

效果

2.11 使用Bootstrap 5样式

与2.9和2.10的例子一样，DataTables也可以使用Bootstrap的表样式选项与Bootstrap 5样式。

脚本：

    <script>
		$(document).ready(function () {
			$('#example').DataTable();
		});
    </script>

html代码：

在table表单元素引用table table-striped table-bordered样式。

<table id="example" class="table table-striped table-bordered" style="width:100%">
</table>

效果：

2.12 使用Foundations的表样式

DataTables可以使用Bootstrap的表样式选项与Foundation样式，DataTables的Foundation集成还为DataTables中的分页控件提供了一个渲染器，以确保表的分页也由Foundation统一样式。

脚本：

    <script>
		$(document).ready(function () {
			$('#example').DataTable();
		});
    </script>

html代码：

在table表单元素引用display样式。

<table id="example" class="display" style="width:100%">
</table>

效果：

2.13 Fomantic-UI

此示例显示了与FomanticUI（语义UI的维护社区分支）集成的DataTables。FomanticUI是一个综合框架，它使用CSS类名（如单词）来创建自然语言样式库。 

脚本：

    <script>
		$(document).ready(function () {
			$('#example').DataTable();
		});
    </script>

html代码：

在table表单元素引用ui celled table样式。

<table id="example" class="ui celled table" style="width:100%">
</table>

效果：

 2.14 Bulma

Bulma 是一款基于 Flexbox 的现代 CSS 的响应式框架。

脚本：

    <script>
		$(document).ready(function () {
			$('#example').DataTable();
		});
    </script>

html代码：

在table表单元素引用table is-striped样式。

<table id="example" class="table is-striped" style="width:100%">
</table>

效果：

2.15 jQuery UI ThemeRoller

jQuery UI ThemeRoller是独特的jQuery UI web 部件主题皮肤的web应用程序。

脚本：

    <script>
		$(document).ready(function () {
			$('#example').DataTable();
		});
    </script>

html代码：

在table表单元素引用display样式。

<table id="example" class="display" style="width:100%">
</table>

效果：

2.16 Material Design

此示例显示了为Google的Material Design设计的DataTables。Material Design Lite库用于提供样式实现。(PS:未能很好集成Material Design Lite库，不建议使用)

脚本：

$(document).ready(function () {
    $('#example').DataTable({
        autoWidth: false,
        columnDefs: [
            {
                targets: ['_all'],
                className: 'mdc-data-table__cell',
            },
        ],
    });
});

html代码：

在table表单元素引用mdl-data-table样式。

<table id="example" class="mdl-data-table" style="width:100%">
</table>

效果：

2.17 UIKit 3

此示例显示了与UIKit 3集成的DataTables。(不建议使用，未能很好支持)

DataTables与UIKit的集成仍在开发中，并非所有元素都能正常工作。只有当所有DataTables扩展完全支持UIKit时，集成才能完成并通过DataTables下载生成器可用。

脚本：

	$(document).ready(function () {
		$('#example').DataTable();
	});

html代码：

在table表单元素引用uk-table uk-table-hover uk-table-striped样式。

<table id="example" class="uk-table uk-table-hover uk-table-striped" style="width:100%">
</table>

效果：

上述代码下载