Buttons Column Visibility popup

ctechuk

Evening all,

I have successfully implmented the column visibility feature using buttons. As the below as my guide:

https://datatables.net/extensions/buttons/examples/column_visibility/simple.html

Below a screen shot if the issue:

However the dropdown menu doesnt seem to be rendering correctly. I am sure I have missed something fundamental, maybe in the order in which I am loading the js files. I have been chasing my tail for a couple of hours now and thought it best to seek advice from the experts. See my code below:

manageProductTable = $('#manageProductTable').DataTable({
        'ajax': myurl,
        'stateSave': true,
        'columns': [
            {"data": null, "class": "details-control", "orderable": false, "defaultContent": "", "width": "2%"},
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null
            ],
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print', 'colvis'
        ],
        'order': []
    }); 

<!-- jquery -->
    <!-- <script src="assests/jquery/jquery.min.js"></script> -->
    <script src="assests/export/jquery-3.3.1.js"></script>
    
  <!-- jquery ui -->  
  <link rel="stylesheet" href="assests/jquery-ui/jquery-ui.min.css">
  <script src="assests/jquery-ui/jquery-ui.min.js"></script>

  <!-- bootstrap js -->
  <script src="assests/bootstrap/js/bootstrap.min.js"></script>
    
  <!-- File inclusion for export features -->
  <!-- <script src="assests/export/jquery-3.3.1.js"> </script> -->  <!-- Conflct with modal messages -->
  <script src="assests/export/jquery.dataTables.min.js"></script>
  <script src="assests/export/dataTables.buttons.min.js"></script>
  <script src="assests/export/buttons.flash.min.js"></script>
  <script src="assests/export/jszip.min.js"></script>
  <script src="assests/export/pdfmake.min.js"></script>
  <script src="assests/export/vfs_fonts.js"></script>
  <script src="assests/export/buttons.html5.min.js"></script>
  <script src="assests/export/buttons.print.min.js"></script>
  <script src="assests/export/buttons.colVis.js"></script>

Any help would be greatly appreciated.

Ctech

colin

Hi @ctechuk ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

ctechuk

Colin,

thanks for the speedy reply. It would be the first time for me to use Jsfiddle, may take too long to get to grips with it.

How can I share a login the test site I have up and running?

Ctech

ctechuk

Colin,

I have an update. As I ams sure you were hoping, I would find the answer by using the live example.

By adding the following css includes:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.4/css/buttons.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.2/css/responsive.dataTables.min.css"/>

The dropdown is now working as expected. I havent found out which one exactly was the culprit.

Many thanks for the direction.

Loving Datatabes.

Ctech