响应式。断点

自：Responsive 1.0.0 起

设定响应式实例的断点。
请注意 - 此属性需要 DataTables 的响应式扩展。

说明

启用了响应式的 DataTable 中列的可见性可以通过断点及其与这些断点匹配的类名（以及其他逻辑运算）来控制。这提供了准确控制表中哪些列对每种设备类型可见的能力。有关详细信息，请参见响应式手册。

响应式实例使用的断点是针对该实例（即每个表）唯一的，允许为不同的表设置不同的断点，这是必需的。该表一次只能“处于”单个断点模式中。如果您希望列在多个断点处显示，则分配给该列的类必须反映这一点（例如，className: 'tablet desktop'）。

由 DataTable.Responsive.breakpoints 定义的默认断点为

[
    { name: 'desktop',  width: Infinity },
    { name: 'tablet-l', width: 1024 },
    { name: 'tablet-p', width: 768 },
    { name: 'mobile-l', width: 480 },
    { name: 'mobile-p', width: 320 }
]

请注意，如果您定义了自己的断点阵列，则断点的顺序并不重要。在使用之前，Responsive 会自动对其阵列进行排序，将其排序为所需的内部顺序。

请注意，与所有其他响应式配置选项一样，此选项是对 DataTables 选项的默认设置的扩展。此属性应在 DataTables 初始化对象中设置。

类型

数组

说明

一个对象数组，其中每个对象包含两个属性，用于描述每个断点

name - 断点名称，允许类定位。它可以是单个单词，或附加 \-[a-z] 以提供子断点，类似于默认设置，例如允许平板电脑、平板电脑横向或平板电脑纵向断点。
width - 应用此断点的页面视口宽度（像素）。给定值是应用此断点的最大大小，它将一直使用到找到下一个断点为止。例如，如果使用默认断点（如上所述），则 tablet-l 断点将应用于 768 < x <= 1024（其中 x 是视口宽度）。

默认

值：DataTable.Responsive.breakpoints

响应式使用的默认断点由该对象中定义的静态数组定义。如果需要，这提供了轻松设置所有表格使用的通用断点的能力。

示例

在 DataTables 初始化中设定自定义断点

new DataTable('#myTable', {
	responsive: {
		breakpoints: [
			{ name: 'desktop', width: Infinity },
			{ name: 'tablet', width: 1024 },
			{ name: 'fablet', width: 768 },
			{ name: 'phone', width: 480 }
		]
	}
});

使用默认值设定自定义断点

DataTable.Responsive.breakpoints = [
	{ name: 'desktop', width: Infinity },
	{ name: 'tablet', width: 1024 },
	{ name: 'fablet', width: 768 },
	{ name: 'phone', width: 480 }
];

new DataTable('#myTable', {
	responsive: true
});