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

Question

我的任务是在我的 DataTables 中出现切换 JavaScript，但它似乎不仅按钮甚至功能都不起作用。

这是我的代码

HTML

  <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>[e-mail]</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>

Answer 1

关于为什么它不像您正在复制的那样运行，我认为有 3 个原因。第一：原作者包含了使其工作所需的链接。他在jsfiddle左侧添加了它Resources url。第二：原作者input在他的代码中包含了成为切换按钮的元素。第三：在原作者中，input:checkbox他包含了data-label-text="Position"哪个值应该等于以0.开头的列号。所以如果你想使用作者代码的全部功能，你需要查看它如何工作的每个细节。你可以检查这个jsfiddle&nbsp;https://jsfiddle.net/u9h5k048/10/这是你需要在jsfiddle资源中添加的链接https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.jshttps://cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.jshttps://cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.csshttps://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.csshttps://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.jshttps://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap2/bootstrap-switch.min.csshttps://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js

Answer 2

你应该添加 toggle-vis 元素<input&nbsp;&nbsp; &nbsp; &nbsp; type="checkbox"&nbsp;&nbsp; &nbsp; &nbsp; data-column="0"&nbsp;&nbsp; &nbsp; &nbsp; class="toggle-vis"&nbsp;&nbsp; &nbsp; &nbsp; data-label-text="ID"&nbsp;&nbsp; &nbsp; &nbsp; checked/>&nbsp; &nbsp; <input&nbsp;&nbsp; &nbsp; &nbsp; type="checkbox"&nbsp;&nbsp; &nbsp; &nbsp; data-column="1"&nbsp;&nbsp; &nbsp; &nbsp; class="toggle-vis"&nbsp;&nbsp; &nbsp; &nbsp; data-label-text="Name"&nbsp;&nbsp; &nbsp; &nbsp; checked>&nbsp; &nbsp; <input&nbsp;&nbsp; &nbsp; &nbsp; type="checkbox"&nbsp;&nbsp; &nbsp; &nbsp; data-column="2"&nbsp;&nbsp; &nbsp; &nbsp; class="toggle-vis"&nbsp;&nbsp; &nbsp; &nbsp; data-label-text="Position"&nbsp;&nbsp; &nbsp; &nbsp; checked/>&nbsp;&nbsp;