使用JavaScript动态显示/隐藏列不起作用

Question

我的任务是在我的DataTables中显示为切换DataTables，但它似乎不只是按钮，甚至函数。

这是我的密码

  <div class="col-lg-12 col-md-12 col-sm-12 mb-30">
    <table class="data-table stripe hover multiple-select-row nowrap" id="example">
      <thead>
        <tr>
          <th class="table-plus datatable-nosort">No</th>
          <th>Name</th>
          <th>Phone</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="table-plus">1</td>
          <td>Michael</td>
          <td>123456789</td>
          <td>michael@gmail.com</td>
        </tr>
      </tbody>
    </table>
  </div>
</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>

我试图在这里复制某些人的代码，JSFiddle，不幸的是，切换没有出现。

Answer 1

有三个原因，我看到了为什么它没有像你正在复制的那样运行。

first：最初的作者包含了作品所需的链接。他把它添加到jsfiddle左边的Resources url中。

第二：最初的作者在代码中包含了input元素，这些元素变成了切换按钮。

第三行：在最初的作者input:checkbox中，他包含了data-label-text="Position"，其值应该等于以0开头的列号。

因此，如果您希望使用作者代码的全部功能，您需要了解它将如何工作的所有细节。你可以检查一下这个小小提琴https://jsfiddle.net/u9h5k048/10/

这是您需要在jsfiddle资源中添加的链接。

https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js

https://cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js

https://cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js

https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap2/bootstrap-switch.min.css

https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js

Answer 2

您应该添加切换-vis元素。

<input 
      type="checkbox" 
      data-column="0" 
      class="toggle-vis" 
      data-label-text="ID" 
      checked/>
    <input 
      type="checkbox" 
      data-column="1" 
      class="toggle-vis" 
      data-label-text="Name" 
      checked>
    <input 
      type="checkbox" 
      data-column="2" 
      class="toggle-vis" 
      data-label-text="Position" 
      checked/>