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>