DataTables ColVis Erweiterung Spalten Sichtbarkeit

Question

Ich verwende DataTables jquery Plugin in meiner Anwendung. In meiner Tabelle sind einige Spalten nicht sichtbar. Ich versuche, die Sichtbarkeitsschaltfläche zu verwenden, um die bereits angezeigten Spalten auszublenden/anzuzeigen. Aber ich will nicht verstecken oder angezeigte Spalten bei der Definition der Tabelle versteckt, sie werden nur in jquery für benutzerdefinierte Filter verwendet. Ich habe das Beispiel im Dokument verwendet, aber es nur First-Child ausblenden. Ich möchte alle Spalten ausblenden, die ich in der Spaltendefinition versteckt habe. Ich habe viele verschiedene Syntaxen ausprobiert, aber ohne Erfolg.

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

Sie verwenden, um die api Methode table.visible(INDEX_COL), e .: https://datatables.net/reference/api/column().visible()

Answer 2

Sie können die Spalten unterscheiden, die Sie in der Lage sein wollen, sich zu verstecken und zeigen mit dem Knopf eine bestimmte Klasse zu ihnen zuweisen (zB sie mit dem Tables columns().visible()API

. "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' ] 
     } 
    } 
] 
}); 

Dann können Sie ein- bzw. ausblenden wählen

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

Answer 3

Es war nicht so kompliziert, ich ändere die Linie von columns:[0,1,2,3,4,5,6,7,8,9,10,13,14,15,16,17,18,19,20]. Auf diese Weise definiere ich einfach welche Spalten ich anzeigen möchte und welche nicht ich verstecken möchte.