5

I am willing to hide some columns (actually from the example below the column with index 6) from user view but still want to have them in the DOM to make search access the values.

I use 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')
            ];

In the <thead> html I define empty <td>:

<th></th>

And add data in the <tbody>:

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

So I tried all possibilities which I could find:

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

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

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

DTColumnDefBuilder.newColumnDef(6).notVisible()

Nothing worked, the column is still displayed.

P. S. All columns from (id=0) to (id=5) fill the whole table width (every <td> has a css width setting)

P. P. S. I don't want to show the column with responsive: true option.

N.Zukowski
  • 600
  • 1
  • 12
  • 31

5 Answers5

4

The Datatable API for visible : column().visible();

Reference link : https://datatables.net/reference/api/column().visible()

Example Code : DTColumnBuilder.newColumn("columname").withTitle("column title").withOption('visible', false),

3

if you are working on type script file , you can do like this

"columnDefs": [
            {
                "targets": [ 2 ],
                "visible": false,
                "searchable": false
            },
hosam hemaily
  • 412
  • 5
  • 17
  • Best professional way, tried with Angular 5 when defining `dtOptions: this.dtOptions = { order:[1,'asc'],columnDefs:[ { "targets": [ 3 ],"visible": false }] };` Bravo ! – Mlle 116 Sep 30 '20 at 09:21
1
$scope.dtcolumns[0].visible = false
Unheilig
  • 16,196
  • 193
  • 68
  • 98
0

Use ng-show directive to show and hide element, but keep it in DOM.

epitka
  • 17,275
  • 20
  • 88
  • 141
0

Maybe not the best solution, but I got this working by setting a class like:

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

Then, use CSS to hide it.

.hiddencol {
    display: none;
}
AdvilUser
  • 3,142
  • 3
  • 25
  • 15