Column visibility control is not working for Me

Sanit Kale

I am trying to add Column Visibility Control to my Datatable. but when I add it I am not able to see anything.

       var dataTable = $('#employee-grid').DataTable( {
            "processing": true, 
            "oLanguage": { "sSearch": "Search:" },
            "bJQueryUI": true,
            "bDestroy": true,
            "bPaginate": true,
            "bLengthChange": true ,
            "bFilter": true,
            "bSort": true,
    "lengthMenu": [[10, 25, 50, 100, 200, -1], [10, 25, 50, 100,200, "All"]],
            "bInfo": true,
            "bAutoWidth": false,
            "bDeferRender": true,
            "bRetrieve": true,
           " bSelect": true,
           // "smart": true,
            "sPaginationType": "full_numbers", 
     responsive: {
             details: {
             type: 'column',
             className:'control',
          target: 1
              }     
              },


             order:[],
             columnDefs: [ {
             className: 'control',
             orderable: false,
             targets:   1   
             },
             {
              orderable: false,
              targets:   0  
              },        
      ],
         fixedColumns: true,

              "sAjaxSource":"assets/ajax/contact_list-load.php",

     dom: 'lBfrtip',

             buttons: [
                             {
                              extend: 'copyHtml5',          
                              exportOptions: {
                               columns: [2,9,10,11,12,15,14,13,16,23,17,18,19,20,21,22,24]
                               }
                               },
                              {
                              extend: 'excelHtml5',
              text: 'XLS',
                              exportOptions: {
                               columns: [2,9,10,11,12,15,14,13,16,23,17,18,19,20,21,22,24]
                              }
                              },
                  {
                      extend:  'csvHtml5',
                  exportOptions: 
                  {
               columns: [2,9,10,11,12,15,14,13,16,23,17,18,19,20,21,22,24]
                   }
                   },
                          ],
                   //if add here  'colvis' i am not able to see anything just showing column names
                      }  );

allan

Have you included the buttons.colVis.js file?

Can you link to a page showing the issue please?

Allan

Sanit Kale

Yes, I Included both data buttons.colVis.js and data buttons.colVis.min.js File.

I have messaged you link and credentials.

Sanit Kale

Console Screen Shot

allan

Ah - I see the issue. You've included the legacy ColVis extension, rather than Buttons' own column visibility controls. You need to include buttons.colVis.js as I mentioned above, not dataTables.colVis.js which is legacy and not supported.

Allan

Sanit Kale

Thanks @allan I will try that