Colvis when added to custom dropdown, it never works.

bchipre

I was using one of a JSfiddle solution for my datatable.
I am stuck without a solution for past 3 days now ! ?
This is the reply that was answered in stackoverflow.

This issue is when I try to add another option called Select Columns (using 'colvis') to the dropdown, on click colvis never works but all other option work perfectly fine like copy, pdf, excel etc..

Also when I change the script from
var $buttons = $('.dt-buttons').hide(); to
var $buttons = $('.dt-buttons').show();
Column Visibility works correctly.

What could be the problem?
This is the code I tried :

 <title>Example 1 - apply dataTable()</title>
    <div class="actionPart" >
        <div class="actionSelect">
            <select id="exportLink">
                <option>Export userlist</option>
                <option id="csv">Export as CSV</option>
                <option id="excel">Export as XLS</option>
                <option id="copy">Copy to clipboard</option>                   
                <option id="pdf">Export as PDF</option>
                <option id="print">Print</option>
                <option id="colv">Select Columns</option>
            </select>
        </div>
    </div>

<table class="display" id="example">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th data-orderable="false">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>
        </tbody>
    </table>

<script>
$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5',
            'print',
            {
              extend: 'colvis',
              //text: 'Column Selection',
              collectionLayout: 'fixed four-column',
              postfixButtons: [ 'colvisRestore' ],
              columnText: function ( dt, idx, title ) {
                return (idx+1)+': '+title;
              }
           },
        ],
       initComplete: function() {
         var $buttons = $('.dt-buttons').show();
         $('#exportLink').on('change', function() {
            var btnClass = $(this).find(":selected")[0].id 
               ? '.buttons-' + $(this).find(":selected")[0].id 
               : null;
            if (btnClass) $buttons.find(btnClass).click(); 
         })
       } 
    } );
} );
</script>

bchipre

I tried this PHP and it works like a charm, Column Visibility works perfectly from dropdown. But when i copy the same scripts, links and code to my main application, quack quack... column Visibility from dropdown fails and all other options works . Don't know where it stuck due to.

Also found another problem in Datatables...
When Restore Visibility is clicked continuously, the width of the table keeps increasing. Is it an issue from my end or a datatable bug ?

colin

Hi @bchipre ,

Is this with Bootstrap styling? If so, see this thread - we introduced an issue with the last release.

If not, 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