使用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>

我正在尝试复制某人的代码，这里是JSFiddle链接，但不幸的是，切换功能没有出现。

- mastersuse

---

这是你问题中的笔误吗？</tbody>tbody>还是实际上出现在你的代码中？因为那可能是问题所在。 - JkAlombro

我已经编辑了我的代码，但结果仍然没有改变。 - mastersuse

bootstrapSwitch是什么？它在哪里定义了吗？ - Scaramouche

@Scaramouche 我不知道该去哪里申请。 - mastersuse

我不知道该在哪里应用什么？º_º - Scaramouche

抱歉，我是新手。我发现了这段代码并尝试将其应用到我的项目中。我相信我可能会漏掉一些代码。 - mastersuse

Answer 1

我看到三个原因，解释了为什么它不像你复制的那样运行。 第一个原因：原作者包含了需要使其工作的链接。他在jsfiddle的左侧资源url中添加了它。 第二个原因：原作者在他的代码中包含了input元素，这些元素成为切换按钮。 第三个原因：在原作者的input:checkbox中，他包含了data-label-text="Position"，其中该值应等于从0开始的列号。

所以，如果您希望使用作者代码的全部功能，您需要查看它将如何工作的每个细节。 您可以检查此jsfiddle 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

- indefinite

---

谢谢，我只是在您的帖子底部缺少两个 Bootstrap Switch 的链接。 - mastersuse

Answer 2

你应该添加toggle-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/>  

- Senthil

---

已经添加但没有任何变化 JSFiddle - mastersuse

问题在于您已经在fiddle Javascript中添加了script标签，因此您可以在控制台中看到错误。您不需要在Javascript中添加<script></script>，fiddle会自动添加这些标签。 - Senthil