Angular 数据表隐藏列

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)的所有列填满整个table宽度（每个<td>都有一个csswidth设置）

P。 P. S. 我不想显示带有 responsive: true 选项的列。

Answer 1

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

Answer 2

$scope.dtcolumns[0].visible = false

Answer 3

也许不是最好的解决方案，但我通过设置 class 来解决这个问题：

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

然后，使用CSS隐藏它。

.hiddencol {
    display: none;
}

Answer 4

可见数据表API：column().visible();

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

示例代码： DTColumnBuilder.newColumn("columname").withTitle("column title").withOption('visible', false),

Answer 5

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

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

Angular 数据表隐藏列

Angular datatables hide column

angularjs

angular-datatables