自定義數據表

Question

我目前正在處理數據表，並且需要定製模板提供的某些數據表功能。 我試圖將列可見性功能與所有列一起分配給數據表，但默認情況下某些字段應該位於數據表上。例如：假設我有5列[姓名，地址，年齡，電子郵件地址，電話號碼]。但是默認情況下，數據表只能顯示[姓名，電子郵件，電話]字段。但列可見性應顯示所有5個字段。我不確定是否有可能。 這就是我迄今爲止所做的。

var table = $('#data-table').DataTable({ 
     destroy: true, 
     dom: 'lBfrtip', 
     "bFilter": true, 
     "aLengthMenu": [[5, 10, 15, 20, 50, 100, -1], [5, 10, 15, 20, 50, 100, "All"]], 
     "buttons": [ 
      { 
       extend: 'copyHtml5', 
       exportOptions: { 
        columns: [ 0, ':visible' ] 
       } 
      }, 
      { 
       extend: 'excelHtml5', 
       exportOptions: { 
        columns: ':visible' 
       } 
      }, 
      { 
       extend: 'pdfHtml5', 
       exportOptions: { 
        columns: [ 0, 1, 2, 5 ] 
       } 
      }, 
      { 
       extend: 'colvis', 
       postfixButtons: ['colvisRestore'], 
      }, 
      'print' 
     ] 
    }); 

而在數據表上我有Action字段，包括Edit和Delete Button。有什麼辦法可以從列可見性，打印和下載按鈕選項中刪除動作過濾器？

希望我已經解釋過了。如果有人能指導我，那會很棒。

在此先感謝。

Answer 1

爲了操作，colvis按鈕需要以下條件：

按鈕欄目的知名度按鈕插件

確保您已colvis插件JS參考。

如果你想在加載時隱藏少量列。

table.column(3).visible(false, false); 

如果你想只有特定的列可以設置可見colvis

{ 
extend: 'colvis', 
columns: [0, 1, 2, 3], // These are columns can be set visibility, others will be always visible 
} 

樣品演示

$(function() { 
 
    var table = $('#example').DataTable({ 
 
    destroy: true, 
 
    dom: 'lBfrtip', 
 
    "bFilter": true, 
 
    "aLengthMenu": [ 
 
     [5, 10, 15, 20, 50, 100, -1], 
 
     [5, 10, 15, 20, 50, 100, "All"] 
 
    ], 
 
    "buttons": [{ 
 
     extend: 'copyHtml5', 
 
     exportOptions: { 
 
      columns: [0, ':visible'] 
 
     } 
 
     }, { 
 
     extend: 'excelHtml5', 
 
     exportOptions: { 
 
      columns: ':visible' 
 
     } 
 
     }, { 
 
     extend: 'pdfHtml5', 
 
     exportOptions: { 
 
      columns: [0, 1, 2, 5] 
 
     } 
 
     }, { 
 
     extend: 'colvis', 
 
     columns: [0, 1, 2, 3], // These are columns can be set visiblity, others will be always visible 
 
     postfixButtons: ['colvisRestore'], 
 
     }, 
 
     'print' 
 
    ] 
 
    }); 
 

 
    // Initially this will hide 4th column 
 
    table.column(3).visible(false, false); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<script src="https://cdn.datatables.net/s/bs/jszip-2.5.0,pdfmake-0.1.18,dt-1.10.10,b-1.1.0,b-flash-1.1.0,b-html5-1.1.0,b-print-1.1.0,fh-3.1.0,sc-1.4.0/datatables.min.js"></script> 
 
<script src="https://cdn.datatables.net/buttons/1.4.0/js/buttons.colVis.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/bs/jszip-2.5.0,pdfmake-0.1.18,dt-1.10.10,b-1.1.0,b-flash-1.1.0,b-html5-1.1.0,b-print-1.1.0,fh-3.1.0,sc-1.4.0/datatables.min.css"> 
 

 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"> 
 

 

 
<div class="container"> 
 
    <table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example"> 
 
    <thead> 
 
     <tr> 
 
     <th>name</th> 
 
     <th>address</th> 
 
     <th>age</th> 
 
     <th>email </th> 
 
     <th>phone</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>Trident</td> 
 
     <td>Internet Explorer 4.0</td> 
 
     <td>Win 95+</td> 
 
     <td> 4</td> 
 
     <td>X</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Trident</td> 
 
     <td>Internet Explorer 5.0</td> 
 
     <td>Win 95+</td> 
 
     <td>5</td> 
 
     <td>C</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Trident</td> 
 
     <td>Internet Explorer 5.5</td> 
 
     <td>Win 95+</td> 
 
     <td>5.5</td> 
 
     <td>A</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Trident</td> 
 
     <td>Internet Explorer 6</td> 
 
     <td>Win 98+</td> 
 
     <td>6</td> 
 
     <td>A</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Trident</td> 
 
     <td>Internet Explorer 7</td> 
 
     <td>Win XP SP2+</td> 
 
     <td>7</td> 
 
     <td>A</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Trident</td> 
 
     <td>AOL browser (AOL desktop)</td> 
 
     <td>Win XP</td> 
 
     <td>6</td> 
 
     <td>A</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Gecko</td> 
 
     <td>Firefox 1.0</td> 
 
     <td>Win 98+/OSX.2+</td> 
 
     <td>1.7</td> 
 
     <td>A</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Gecko</td> 
 
     <td>Firefox 1.5</td> 
 
     <td>Win 98+/OSX.2+</td> 
 
     <td>1.8</td> 
 
     <td>A</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Gecko</td> 
 
     <td>Firefox 2.0</td> 
 
     <td>Win 98+/OSX.2+</td> 
 
     <td>1.8</td> 
 
     <td>A</td> 
 
     </tr> 
 

 
     <tr> 
 
     <td>Other browsers</td> 
 
     <td>All others</td> 
 
     <td>-</td> 
 
     <td>-</td> 
 
     <td>U</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Data table colvis reference