CODEWITHSUNDEEP
javascriptjquery
mastersuse
mastersuse

Reputation: 988

Error appear related to JS for Toggle Button

I already declare ID in my <div>, however an error appear, how to solve this error.

enter image description here

Below is my Code for reference

HTML

<div class="row">
 <div>
  <input type="checkbox" data-column="0" class="toggle-vis" data-label-text="No" checked/>
  <input type="checkbox" data-column="1" class="toggle-vis" data-label-text="Region" checked>
  <input type="checkbox" data-column="2" class="toggle-vis" data-label-text="IBSE Node" checked/>
 </div>
<div>
 <table class="data-table stripe hover multiple-select-row nowrap" id="example">
  <thead>
   <tr>
    <th class="table-plus datatable-nosort">No</th>
    <th>Region</th>
    <th>IBSE Node</th>
   </tr>
  </thead>
 </table>
</div>

JS

<script>
    $(function(){
        $.fn.bootstrapSwitch.defaults.onColor = 'success';
        $.fn.bootstrapSwitch.defaults.offColor = 'danger';
        $.fn.bootstrapSwitch.defaults.size = 'mini';
        $.fn.bootstrapSwitch.defaults.state = 'false';
        $.fn.bootstrapSwitch.defaults.inverse = 'true';
        $(".toggle-vis").bootstrapSwitch();
            var table = $('#example').DataTable();
        $('.toggle-vis').on('switchChange.bootstrapSwitch', function(event, state) {
            event.preventDefault();
            var column = table.column($(this).attr('data-column'));
            column.visible( ! column.visible() );
        });
    });
</script>

Upvotes: 0

Views: 105

Answers (1)

rrsantos
rrsantos

Reputation: 435

You cant reinitialize datatable you need to destroy it before initialize again. add this lines inside your toggle function.

$("#example").dataTable().fnDestroy();

Upvotes: 1

Related Questions