Question

我愿意从用户视图中隐藏一些列（实际上来自索引为6的列下面的示例），但仍希望将它们放在DOM中以使搜索访问值。

我使用DTColumnDefBuilder：

$scope.dtColumnDefsTabs = [
                DTColumnDefBuilder.newColumnDef(0).notSortable(),
                DTColumnDefBuilder.newColumnDef(1),
                DTColumnDefBuilder.newColumnDef(2).withOption('orderDataType', 'content-categories'),
                DTColumnDefBuilder.newColumnDef(3).withOption('orderDataType', 'markers'),
                DTColumnDefBuilder.newColumnDef(4).notSortable(),
                DTColumnDefBuilder.newColumnDef(5).notSortable().withClass('no-background-image'),
                DTColumnDefBuilder.newColumnDef(6).withOption('visible', 'false')
            ];

在<thead> html中，我定义了空<td>：

<th></th>

并在<tbody>：

中添加数据

<td>{{ entry.device.device }}</td>

所以我尝试了所有可能找到的可能性：

DTColumnDefBuilder.newColumnDef(6).withOption('visible', 'false')

DTColumnDefBuilder.newColumnDef(6).withOption('visible', false)

$scope.dtColumnDefsTabs[6].visible = false;

DTColumnDefBuilder.newColumnDef(6).notVisible()

没有任何效果，列仍然显示。

P上。 S.从（id = 0）到（id = 5）的所有列填充整个表格宽度（每<td>都有一个css width设置）

P上。 P. S.我不想用responsive: true选项显示列。

Answer 1

可见的数据表API ：column（）。visible（）;

参考链接：https://datatables.net/reference/api/column().visible()

示例代码： DTColumnBuilder.newColumn（“ columname”）。withTitle（“ column title”）。withOption（'visible'，false），

Answer 2

如果您正在处理类型脚本文件，您可以这样做

"columnDefs": [
            {
                "targets": [ 2 ],
                "visible": false,
                "searchable": false
            },

Answer 3

使用ng-show指令显示和隐藏元素，但将其保存在DOM中。

Answer 4

$scope.dtcolumns[0].visible = false

Answer 5

也许不是最好的解决方案，但我通过设置类来实现这一点：

$scope.dtColumns = [
    DTColumnBuilder.newColumn('hiddencol').withClass('hiddencol'),
    ...
]

然后，使用CSS隐藏它。

.hiddencol {
    display: none;
}

角度数据表隐藏列

5 个答案: