colvis jquery colonne visibilité n'a pas fonctionné

Question

S'il vous plaît aidez-moi à obtenir le problème, js colvis ne fonctionne pas dans mon projet. Ceci est source:

<script type="text/javascript"> 

    var table; 

$(document).ready(function() { 

     //datatables 
     table = $('#table').DataTable({ 

      "processing": true, //Feature control the processing indicator. 
      "serverSide": true, //Feature control DataTables' server-side processing mode. 
      "order": [], //Initial no order. 
      // Load data for the table's content from an Ajax source 
      "ajax": { 
       "url": "<?php echo site_url('customer/ajax_list')?>", 
       "type": "POST", 
       "data": function (data) { 
        data.salesnama = $('#salesnama').val(); 
        data.type = $('#type').val(); 
       } 
      }, 

      //Set column definition initialisation properties. 
      "columnDefs": [ 
       { 
        "targets": [0], //first column/numbering column 
        "orderable": false, //set not orderable 
       }, 
      ], 

     }); 

    var colvis = new $.fn.dataTable.ColVis(table); //initial colvis 
    $('#colvis').html(colvis.button()); //add colvis button to div with id="colvis" 

}); 
</script> 

Le problème est le bouton colvis na pas show, je pense que ce code même avec l'échantillon dans la source datatable

ce bouton Afficher le code colvis

 <div class="col-sm-12"> 
      <div id="colvis"> tes</div> 
     </div> 

Answer 1

Je ne voyez que vous incluez l'option buttons et dom qui devrait être incluse pour que colvis fonctionne, ajoutez ceci à votre script actuel:

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

N'oubliez pas d'inclure le besoin de bibliothèques. Voici un exemple très basique de official page:

$(document).ready(function() { 
 
    $('#example').DataTable({ 
 
    dom: 'Bfrtip', 
 
    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>