响应式详细信息目标
自:响应式 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'
}
}
});