Угловые таблицы данных скрывают столбец

Я хочу скрыть некоторые столбцы (на самом деле из примера ниже столбца с индексом 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.


angularjs angular-datatables
person N.Zukowski    schedule 06.07.2016    source источник
comment
создайте jsfiddle или сделайте полный пример здесь, на SO.   -  person vittore    schedule 06.07.2016
comment
вы смотрели директиву ng-show?   -  person epitka    schedule 06.07.2016
comment
@epitka ng-show сделала свое дело. Не могли бы вы прокомментировать ответ? Я хотел бы принять это   -  person N.Zukowski    schedule 06.07.2016

Ответы (5)


arrow_upward
0
arrow_downward

Используйте директиву ng-show для отображения и скрытия элемента, но оставьте его в DOM.

person epitka    schedule 06.07.2016
comment
В документации по Angular есть примеры. - person epitka; 10.08.2017
comment
Как это сделать в таблице данных ajax? - person Jai Kumaresh; 20.03.2020
comment
@JaiKumaresh добавляет visible: false в columnDefs. - person Thisara Subath; 16.10.2020

arrow_upward
3
arrow_downward

API Datatable для видимости: column().visible();

Ссылка: https://datatables.net/reference/api/column().visible()

Пример кода: DTColumnBuilder.newColumn("имя столбца").withTitle("название столбца").withOption('видимый', false),

person SIVASANKARAN SIVADASSAN    schedule 17.06.2019

arrow_upward
1
arrow_downward

если вы работаете над файлом сценария типа, вы можете сделать так

"columnDefs": [
            {
                "targets": [ 2 ],
                "visible": false,
                "searchable": false
            },
person hosam hemaily    schedule 09.04.2020
comment
Лучший профессиональный способ, испробованный с Angular 5 при определении dtOptions: this.dtOptions = { order:[1,'asc'],columnDefs:[ { "targets": [ 3 ],"visible": false }] }; Браво! - person AlessHo; 30.09.2020

arrow_upward
0
arrow_downward

Возможно, это не лучшее решение, но я заработал, установив такой класс:

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

Затем используйте CSS, чтобы скрыть его.

.hiddencol {
    display: none;
}
person AdvilUser    schedule 07.03.2018

arrow_upward

arrow_downward

person    schedule
comment
Это работа со столбцом, но если мы используем функцию withLightColumnFilter(), фильтр не скрывается. Есть способ сделать это? - person Clement Cuvillier; 27.09.2017