데이터 테이블에 숨어있는 버튼

Question

열의 그룹을 숨기거나 내 데이터 테이블의 버튼을 사용하여 표시하거나 숨길 목록을 선택하고 싶습니다. 이것은 내 자바 스크립트 코드 :

$('#doentes').DataTable({ 
    "ajax" : "phpcode.php", 

    "columns" : [ 
    { 
     "data" : "item1" 
}, { 
     "data" : "item2" 
}, { 
     "data" : "item3" 
}, { 
     "data" : "item4" 
}, { 
     "data" : "item5" 
}], 

"scrollX": true, 

"orderFixed": [[ 1, "asc"],[ 2, "asc"],[ 3, "asc"]] 

}); 

내가 일할 수있는 숨어있는 버튼, 내가 좋아하는, 성공하지 않고 몇 가지 예제를 시도했습니다되지 수 :

dom: 'Bfrtip', 
     buttons: [ 
      'colvis' 
     ] 

및

dom: 'Bfrtip', 
     buttons: [ 
      { 
       extend: 'colvisGroup', 
       text: 'Group 1', 
       show: [ 1, 2 ], 
       hide: [ 3, 4 ] 
      }, 
      { 
       extend: 'colvisGroup', 
       text: 'Group 2', 
       show: [ 3, 4 ], 
       hide: [ 1, 2 ] 
      }, 
      { 
       extend: 'colvisGroup', 
       text: 'Group 3', 
       show: ':hidden' 
      } 
     ] 

내 코드에 어떻게 적용 할 수 있습니까?

편집 : 내 포함 : 그 옵션을하려고 할 때

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css"> 
      <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> 
      <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script> 

오류가 콘솔에 표시되지 않습니다, 유일한 차이점은 옵션 드롭 다운이 당 10, 25, 50, 100 행을 표시하는 것입니다 페이지가 사라집니다.

Answer 1

난 당신이 colvis에 필요한 라이브러리를 포함하는 것을 볼 수 없습니다 :

<script src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script> 
<script src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.colVis.min.js"></script> 

주의 -이 속성이 DataTables의 버튼 확장이 필요합니다. 에 관해서는 https://datatables.net/reference/button/colvis

:

유일한 차이점은 옵션 드롭 다운이 페이지 사라지게 당 10, 25, 50, 100 행을 표시하는 것입니다. dom 옵션에 대한이 들어

같이 설정하십시오 :

'난'길이 드롭 다운입니다

dom: 'Blfrtip' 

: https://datatables.net/examples/basic_init/dom.html 여기에 이력서 예 (정말 기본적인 일) 그래서

:

$(document).ready(function() { 
 
    $('#example').DataTable({ 
 
    dom: 'Blfrtip', 
 
    buttons: [ 
 
     'colvis' 
 
    ] 
 
    }); 
 
});

<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" /> 
 
<link href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> 
 
<script src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script> 
 
<script src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.colVis.min.js"></script> 
 
<table id="example" class="display" width="100%" cellspacing="0"> 
 
    <thead> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Position</th> 
 
     <th>Office</th> 
 
     <th>Age</th> 
 
     <th>Start date</th> 
 
     <th>Salary</th> 
 
    </tr> 
 
    </thead> 
 
    <tfoot> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Position</th> 
 
     <th>Office</th> 
 
     <th>Age</th> 
 
     <th>Start date</th> 
 
     <th>Salary</th> 
 
    </tr> 
 
    </tfoot> 
 
    <tbody> 
 
    <tr> 
 
     <td>Tiger Nixon</td> 
 
     <td>System Architect</td> 
 
     <td>Edinburgh</td> 
 
     <td>61</td> 
 
     <td>2011/04/25</td> 
 
     <td>$320,800</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Garrett Winters</td> 
 
     <td>Accountant</td> 
 
     <td>Tokyo</td> 
 
     <td>63</td> 
 
     <td>2011/07/25</td> 
 
     <td>$170,750</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Ashton Cox</td> 
 
     <td>Junior Technical Author</td> 
 
     <td>San Francisco</td> 
 
     <td>66</td> 
 
     <td>2009/01/12</td> 
 
     <td>$86,000</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Cedric Kelly</td> 
 
     <td>Senior Javascript Developer</td> 
 
     <td>Edinburgh</td> 
 
     <td>22</td> 
 
     <td>2012/03/29</td> 
 
     <td>$433,060</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Airi Satou</td> 
 
     <td>Accountant</td> 
 
     <td>Tokyo</td> 
 
     <td>33</td> 
 
     <td>2008/11/28</td> 
 
     <td>$162,700</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Brielle Williamson</td> 
 
     <td>Integration Specialist</td> 
 
     <td>New York</td> 
 
     <td>61</td> 
 
     <td>2012/12/02</td> 
 
     <td>$372,000</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Herrod Chandler</td> 
 
     <td>Sales Assistant</td> 
 
     <td>San Francisco</td> 
 
     <td>59</td> 
 
     <td>2012/08/06</td> 
 
     <td>$137,500</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Rhona Davidson</td> 
 
     <td>Integration Specialist</td> 
 
     <td>Tokyo</td> 
 
     <td>55</td> 
 
     <td>2010/10/14</td> 
 
     <td>$327,900</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Colleen Hurst</td> 
 
     <td>Javascript Developer</td> 
 
     <td>San Francisco</td> 
 
     <td>39</td> 
 
     <td>2009/09/15</td> 
 
     <td>$205,500</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Sonya Frost</td> 
 
     <td>Software Engineer</td> 
 
     <td>Edinburgh</td> 
 
     <td>23</td> 
 
     <td>2008/12/13</td> 
 
     <td>$103,600</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Jena Gaines</td> 
 
     <td>Office Manager</td> 
 
     <td>London</td> 
 
     <td>30</td> 
 
     <td>2008/12/19</td> 
 
     <td>$90,560</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Quinn Flynn</td> 
 
     <td>Support Lead</td> 
 
     <td>Edinburgh</td> 
 
     <td>22</td> 
 
     <td>2013/03/03</td> 
 
     <td>$342,000</td> 
 
    </tr> 
 
    </tbody> 
 
</table>