DataTables ColVis擴展列的可見性

我在我的應用程序中使用DataTables jQuery插件。在我的表中有些列是不可見的。我正在嘗試使用可見性按鈕來隱藏/顯示已經顯示的列。但我不希望隱藏或顯示列隱藏在表的定義，他們只在jQuery中用於自定義過濾器。我已經在文檔中使用過這個例子，但它只能隱藏第一個孩子。我想隱藏我在列定義中隱藏的所有列。我嘗試了很多不同的語法，但沒有取得任何成功。DataTables ColVis擴展列的可見性

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

來源

2017-02-08 Etienne

您可以使用API方法table.visible(INDEX_COL)，E： https://datatables.net/reference/api/column().visible()

來源

2017-02-08 14:29:31 cbertelegni

這不起作用，因爲當我點擊可見性按鈕時，這些字段總是出現在列表中。 – Etienne

可以區分要能夠隱藏，並與您的按鈕分配給他們一個特定的類顯示的列（如「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' ] 
     } 
    } 
] 
});

然後，您可以選擇顯示或使用數據表columns().visible()API

隱藏

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

來源

2017-02-08 14:54:42 nmbrphi

那不是我想要做的。 CloVis按鈕是DataTables按鈕的擴展。我想我必須改變「列：」：不是（：第一個孩子）'但是我沒有找到正確的語法。 – Etienne

這並不複雜，我把columns: ':not(:first-child)'改爲columns:[0,1,2,3,4,5,6,7,8,9,10,13,14,15,16,17,18,19,20]。通過這種方式，我只是定義我想要顯示哪些列，而不是我想要隱藏的。

來源

2017-02-08 15:34:46 Etienne

DataTables ColVis擴展列的可見性

回答

相關問題