vendredi 28 janvier 2022

Getting the error "DataTables warning: table id=datatable - Cannot reinitialise DataTable"

DataTables warning: table id=datatable - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

I'm trying to hide last three columns by default and display when checked again...

Checkbox filter -

<div class="show-hide-wrap">
Columns <input type="checkbox" id="title" name="title" value="title" class="toggle-vis" data-column="0" checked disabled="disabled"> <label for="title"> Title</label>
<input type="checkbox" id="status" name="status" value="title" class="toggle-vis" data-column="1" checked> <label for="Status"> Status</label>
<input type="checkbox" id="url" name="url" value="url" class="toggle-vis" data-column="2"  checked> <label for="url"> URL</label>
<input type="checkbox" id="version" name="version" value="version" class="toggle-vis" data-column="3" checked > <label for="version"> Version</label>
<input type="checkbox" id="System" name="System" value="System" class="toggle-vis" data-column="4"  checked> <label for="System"> System</label>
<input type="checkbox" id="Target" name="Target" value="Target" class="toggle-vis" data-column="5"  checked > <label for="Target"> Target</label>
<input type="checkbox" id="date" name="date" value="date" class="toggle-vis" data-column="6"> <label for="date"> Deployed On</label>
<input type="checkbox" id="security" name="security" value="security" class="toggle-vis" data-column="7"> <label for="security"> Security</label>
<input type="checkbox" id="links" name="links" value="links" class="toggle-vis" data-column="8"> <label for="links"> Links</label>
</div>

JS Code -

(function ($) 
{ 'use strict';
jQuery(document).ready(function() {
var table = $('#datatable').DataTable({
    columns: [
        {data: 'title'},
        {data: 'status'},
        {data: 'url'},
        {data: 'version'},
        {data: 'System'},
        {data: 'Target'},
        {data: 'date',visible:false},
        {data: 'security',visible:false},
        {data: 'links',visible:false}
    ]
});
 
    $('input.toggle-vis').on( 'change', function (e) {
        e.preventDefault();
 
        /* Get the column API object */
        var column = table.column( $(this).attr('data-column') );
 
        /* Toggle the visibility */
        column.visible( ! column.visible() );
    } );
} );
 })(jQuery, Drupal);



Aucun commentaire:

Enregistrer un commentaire