DataTables ColVis расширяет видимость столбцов

Question

Я использую плагин jQuery DataTables в своем приложении. В моей таблице некоторые столбцы не видны. Я пытаюсь использовать кнопку видимости, чтобы Скрыть/отобразить уже отображенные столбцы. Но я не хочу, чтобы скрытые или отображаемые столбцы были скрыты в определении таблицы, они используются только в jquery для настраиваемых фильтров. Я использовал этот пример в документе, но он скрывает только первого ребенка. Я хочу скрыть все столбцы, которые я скрыл в определении столбца. Я пробовал много разных синтаксисов, но без каких-либо успехов.

var table = $('#mytable').DataTable({ 
    dom: 'Brtip', 
    "scrollX": true, 
    "columnDefs": [ 
     { "targets": [ 11 ], "visible": false}, 
     { "targets": [ 12 ], "visible": false}, 
     { "targets": [ 13 ], "visible": false}, 
     { "targets": [ 14 ], "visible": false}, 
     { "targets": [ 15 ], "visible": false}, 
     { "targets": [ 16 ], "visible": false}, 
     { "targets": [ 17 ], "visible": false}, 
     { "targets": [ 21 ], "visible": false}, 
     { "targets": [ 22 ], "visible": false}, 
     { "targets": [ 23 ], "visible": false}, 
     { "targets": [ 24 ], "visible": false}, 
     { "targets": [ 25 ], "visible": false}, 
     { "targets": [ 26 ], "visible": false}, 
     { "targets": [ 27 ], "visible": false} 
    ], 
    "order": [[ 0, "desc" ]], 
    buttons: [ 
     { 
      extend: 'colvis', 
      collectionLayout: 'fixed two-column', 
      columns: ':not(:first-child)' 
     }, 
     { 
      extend: 'copyHtml5', 
      exportOptions: { 
       columns: [ 0, ':visible' ] 
      } 
     } 
    ], 
}); 

Answer 1

Вы можете использовать метод апи table.visible(INDEX_COL), е .: https://datatables.net/reference/api/column().visible()

Answer 2

можно дифференцировать столбцы, которые вы хотите, чтобы иметь возможность скрыть и показать с вашей кнопки присвоения им определенного класса (например, . "dynamicColumn")

var table = $('#mytable').DataTable({ 
    dom: 'Brtip', 
    "scrollX": true, 
    "columnDefs": [ 
     { className: "dynamicColumn", "targets": [ 10]}, //visible column 
     { "targets": [ 11 ], "visible": false}, //always hidden column 
     [...] 
    ], 
    "order": [[ 0, "desc" ]], 
    buttons: [ 
    { 
     extend: 'colvis', 
     collectionLayout: 'fixed two-column', 
     columns: ':not(:first-child)' 
    }, 
    { 
     extend: 'copyHtml5', 
     exportOptions: { 
      columns: [ 0, ':visible' ] 
     } 
    } 
] 
}); 

Затем вы можете выбрать, чтобы показать или скрыть их с помощью DataTables columns().visible()API

table.columns('.dynamicColumn').visible(false); //hide all dynamic columns 
table.columns('.dynamicColumn').visible(true); //show all dynamic columns 

Answer 3

Это было не так сложно, я меняю линию columns: ':not(:first-child)' на columns:[0,1,2,3,4,5,6,7,8,9,10,13,14,15,16,17,18,19,20]. Таким образом, я просто определяю, какие столбцы я хочу отображать, а не я хочу скрыть.