Show / hide columns dynamically using JavaScript does not function

Question

My mission is to appear toggle JavaScript in my DataTables but it seems not function not only the button even the functions.

Here is my Code

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>[email protected]</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>

I am trying to replicate someones code here JSFiddle unfortunately the toggle is not appear.

Is this a typo in your question? </tbody>tbody> or is it actually in your code? Cause that might be the problem. — JkAlombro
– JkAlombro, Commented May 27, 2019 at 2:04
I have edit my code and still nothing change with the results. — mastersuse
– mastersuse, Commented May 27, 2019 at 2:07
what/where is bootstrapSwitch. have you defined it somewhere? — Scaramouche
– Scaramouche, Commented May 27, 2019 at 2:14

indefinite · Accepted Answer · 2019-05-27 03:44:52Z

2

There are 3 reasons that I see on why it isn't running like the one you're copying.
first: The original author included links that needed for it to works. He added it in the jsfiddle left side Resources url.
second: The original author included input elements in his codes that became the toggle buttons.
third: In the original author input:checkbox he included data-label-text="Position" which the value should be equal to your column number that starts with 0.

so if you wish to used the whole functions of the author's code, You need to see every details on how it is going to work. You can check this jsfiddle https://jsfiddle.net/u9h5k048/10/
this is the link you need to add in jsfiddle resources
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

edited May 27, 2019 at 3:44

answered May 27, 2019 at 2:50

indefinite

4312 gold badges6 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mastersuse Over a year ago

Thank You, I just missing 2 links at the bottom of your post which for bootstrap switch.

Senthil · Accepted Answer · 2019-05-27 02:46:22Z

0

you should add the toggle-vis element

<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/>

answered May 27, 2019 at 2:46

Senthil

2,2441 gold badge15 silver badges21 bronze badges

2 Comments

mastersuse Over a year ago

Already add but nothing changes JSFiddle

Senthil Over a year ago

Issue is you have added script tag inside the fiddle Javascript , so you can see the error in console. You are not required to add <script></script> in the Javascript and fiddle will automatically add those tags.

Collectives™ on Stack Overflow

Show / hide columns dynamically using JavaScript does not function

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related