{hero}

响应式详细信息目标

自:响应式 1.0.0 以来

使用column 详细信息类型时,用于控制子行显示的列/选择器。
请注意,此属性需要适用于 DataTables 的 响应式 扩展。

说明

当为 responsive.details.type 选项选择 column 类型时,此选项能控制数据表中哪个元素将在每行激活显示/隐藏控件。它可以是列索引之一或 Jquery 选择器,如下所述。

如果为 responsive.details.type 使用 inline 选项,则此选项不起作用。

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

类型

数字

说明

应将显示/隐藏控件附加到的列索引。它可以>=0 来从左侧计数列,或 <0 来从右侧计数列。

请注意,此处定义的列应添加类 dtr-control。这允许响应式 CSS 向最终用户显示控件图标。

字符串

说明

作为字符串,此选项用作 Jquery 选择器来确定哪个元素将激活详细信息子行的显示/隐藏控件。这提供了使用表中任何元素的能力 - 例如,你可以使用整行或行中的单个 img 元素。

作为一个空字符串,用户通过响应式的默认单击操作激活行详细信息的能力会被移除。

默认

  • 值:0

示例

使用 column 控件类型并针对最右侧列

new DataTable('#myTable', {
	responsive: {
		details: {
			type: 'column',
			target: -1
		}
	},
	columnDefs: [
		{
			className: 'dtr-control',
			orderable: false,
			targets: -1
		}
	]
});

使用整行显示/隐藏详细信息行

new DataTable('#myTable', {
	responsive: {
		details: {
			type: 'column',
			target: 'tr'
		}
	}
});