与JS切换按钮相关的错误出现

Question

我已经在<div>中声明了ID，但是出现错误，以及如何解决该错误。

下面是我的代码供参考

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>

Answer 1

您无法重新初始化数据表，而需要在再次初始化之前销毁它。 将此行添加到切换功能中。

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