show and hide columns in Datatable upon checkbox selection

Question

Currently I am working on Datatable. Here I'm trying to show and hide table column based on checkbox selection. For normal html table I know how to enable this service using jquery. But the same not working for Datatable. Can any one please suggest me how could i do this?

$(document).ready(function(){
    var table =  $('#mine').DataTable();

$('#mine tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );

$('#myInput').keyup( function() {
        table.draw();
    } );
    $('input.column_filter').on( 'keyup click', function () {
           filterColumn( $(this).parents('tr').attr('data-column') );
       } );

    <table border="0" cellpadding="5" cellspacing="5" >
    <tbody><tr>
    <td>ade:</td><td>
    <input type="text" id="myInput" name="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
    </td></tr>
    <tr id="filter_col2" data-column="1">
                    <td>Column - 2</td>
                    <td align="center"><input class="column_filter" id="col1_filter" type="text"></td>
                </tr>
<tr><td><input type="checkbox" class="toggleColumn" name="a" value="3" /> fourth</td></tr>
                    <tr id="filter_col3" data-column="2">
                        <td>Column - Office</td>
                        <td align="center"><input class="column_filter" id="col2_filter" type="text"></td>
                    </tr>
        </tbody></table>
            <table id="mine" class="display" width="100%" cellspacing="0">
        <thead>
        <th>a</th>
        <th>a</th>
        <th>a</th>
        <th>a</th>
        <th>a</th>
        <th class="a">a</th>
        </thead>
         <tfoot>
                    <tr>
                        <th>a</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th class="a" name="a">Salary</th>
                    </tr>
                </tfoot>
        <tbody>
        <tr><td>saf</td>
        <td>saf</td>
        <td>saf</td>
        <td>saf</td>
        <td>saf</td>
        <td class="a" name="a">saf</td></tr>
        <tr><td>a</td>
        <td>q</td>
        <td>saf</td>
        <td>b</td>
        <td>b</td>
        <td class="a" name="a">c</td></tr>
        <tr><td>a</td>
        <td>q</td>
        <td>b</td>
        <td>saf</td>
        <td>b</td>
        <td class="a" name="a">c</td></tr>
        <tr><td>a</td>
        <td>q</td>
        <td>b</td>
        <td>b</td>
        <td>saf</td>
        <td class="a" name="a">c</td></tr>
        <tr><td>saf</td>
        <td>saf</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td class="a" name="a">c</td></tr>
        <tr><td>a</td>
        <td>b</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td class="a" name="a">c</td></tr>
        <tr><td>a</td>
        <td>b</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td class="a" name="a">c</td></tr>
        <tr><td>a</td>
        <td>b</td>
        <td>c</td>
        <td>a</td>
        <td>b</td>
        <td class="a" name="a">c</td></tr>
        <tr><td>a</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>b</td>
        <td class="a" name="a">c</td></tr>
        <tr><td>a</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>b</td>
        <td class="a" name="a">c</td></tr>
        <tr><td>a</td>
        <td>b</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td class="a">c</td></tr>
        <tr><td>a</td>
        <td>b</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td class="a">c</td></tr>
        <tr><td>a</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>b</td>
        <td class="a">c</td></tr>
        <tr><td>a</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>b</td>
        <td class="a">c</td></tr>
        <tr><td>a</td>
        <td>b</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td class="a">c</td></tr>
        <tr><td>a</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>b</td>
        <td class="a">c</td></tr>
        <tr><td>a</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>b</td>
        <td class="a">c</td></tr>
        <tr><td>a</td>
        <td>b</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td class="a">c</td></tr>
        <tr><td>a</td>
        <td>b</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td class="a">c</td></tr>
        <tr><td>a</td>
        <td>b</td>
        <td>a</td>
        <td>b</td>
        <td>saf</td>
        <td class="a">c</td></tr>
        <tr><td>a</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>b</td>
        <td class="a">saf</td></tr>
        <tr><td>a</td>
        <td>saf</td>
        <td>b</td>
        <td>c</td>
        <td>b</td>
        <td class="a">c</td></tr>
        <tr><td>a</td>
        <td>saf</td>
        <td>b</td>
        <td>c</td>
        <td>b</td>
        <td class="a">c</td></tr>
        <tr><td>a</td>
        <td>a</td>
        <td>saf</td>
        <td>c</td>
        <td>b</td>
        <td class="a">c</td></tr>
        <tr><td>a</td>
        <td>b</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td class="a">c</td></tr>
        <tr><td>a</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>b</td>
        <td class="a">c</td></tr>
        <tr><td>a</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>b</td>
        <td class="a">c</td></tr>
        <tr><td>a</td>
        <td>a</td>
        <td>rauf</td>
        <td>c</td>
        <td>b</td>
        <td class="a">c</td></tr>
        <tr><td>a</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>b</td>
        <td class="a">c</td></tr>
        <tr><td>a</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>b</td>
        <td class="a">c</td></tr>
        <tr><td>a</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>b</td>
        <td class="a">c</td></tr>
        <tr><td>a</td>
        <td>rauf</td>
        <td>saf</td>
        <td>c</td>
        <td>b</td>
        <td class="a">c</td></tr>
        <tr><td>a</td>
        <td>saf</td>
        <td>rauf</td>
        <td>c</td>
        <td>b</td>
        <td class="a">c</td></tr>
        </tbody>
        </table>

tried:


    $(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 = $('#mine').DataTable();
        $('.toggle-vis').on('switchChange.bootstrapSwitch', function(event, state) {
            event.preventDefault();
            var column = table.column(~~$(this).attr('data-column'));
            column.visible( ! column.visible() );
        });

please to avoid down votes post your code (HTML || JQuery) whatever. — Mamdouh Saeed, Oct 28 '16 at 18:15

Mamdouh Saeed · Accepted Answer · 2016-11-02T10:40:10.663

Update: To make all columns still hidden with pagination buttons see this

Fiddle

Try this example

$(document).ready(function(){
    var table =  $('#mine').DataTable();
 
 $("#hide_show_all").on("change",function(){
 var hide = $(this).is(":checked");
 $(".hide_show").prop("checked", hide);

 if(hide){
  $('#mine tr th').hide(100);
  $('#mine tr td').hide(100);
 }else{
  $('#mine tr th').show(100);
  $('#mine tr td').show(100);
 }
});

$(".hide_show").on("change",function(){
 var hide = $(this).is(":checked");
 
 var all_ch = $(".hide_show:checked").length == $(".hide_show").length;

 $("#hide_show_all").prop("checked", all_ch);
 
 var ti = $(this).index(".hide_show");
 
$('#mine tr').each(function(){
 if(hide){
  $('td:eq(' + ti + ')',this).hide(100);
  $('th:eq(' + ti + ')',this).hide(100);
 }else{
  $('td:eq(' + ti + ')',this).show(100);
  $('th:eq(' + ti + ')',this).show(100);
 }
});

});
$('#mine tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );

$('#myInput').keyup( function() {
        table.draw();
    } );
    $('input.column_filter').on( 'keyup click', function () {
           filterColumn( $(this).parents('tr').attr('data-column') );
       });
    
       });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<table border="0" cellpadding="5" cellspacing="5">
  <tbody>
    <tr>
      <td>ade:</td>
      <td>
        <input type="text" id="myInput" name="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
      </td>
    </tr>
    <tr id="filter_col2" data-column="1">
      <td>Column - 2</td>
      <td align="center">
        <input class="column_filter" id="col1_filter" type="text">
      </td>
    </tr>
    <tr id="filter_col3" data-column="2">
      <td>Column - Office</td>
      <td align="center">
        <input class="column_filter" id="col2_filter" type="text">
      </td>
    </tr>
  </tbody>
</table>

<!--control show hide columns ( start )-->
<div id='control_sh'>
  <input type="checkbox" class="hide_show"><span>Hide a</span>
  <input type="checkbox" class="hide_show"><span>Hide b</span>
  <input type="checkbox" class="hide_show"><span>Hide c</span>
  <input type="checkbox" class="hide_show"><span>Hide d</span>
  <input type="checkbox" class="hide_show"><span>Hide e</span>
  <input type="checkbox" class="hide_show"><span>Hide f</span>
  <input type="checkbox" id="hide_show_all"><span>Hide All</span>
</div>
<!--control show hide columns ( end ) -->
<table id="mine" class="display" width="100%" cellspacing="0">
  <thead>
    <th>a</th>
    <th>b</th>
    <th>c</th>
    <th>d</th>
    <th>e</th>
    <th class="a">f</th>
  </thead>
  <tfoot>
    <tr>
      <th>a</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th class="a" name="a">Salary</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>saf</td>
      <td>saf</td>
      <td>saf</td>
      <td>saf</td>
      <td>saf</td>
      <td class="a" name="a">saf</td>
    </tr>
    <tr>
      <td>a</td>
      <td>q</td>
      <td>saf</td>
      <td>b</td>
      <td>b</td>
      <td class="a" name="a">c</td>
    </tr>
    <tr>
      <td>a</td>
      <td>q</td>
      <td>b</td>
      <td>saf</td>
      <td>b</td>
      <td class="a" name="a">c</td>
    </tr>
    <tr>
      <td>a</td>
      <td>q</td>
      <td>b</td>
      <td>b</td>
      <td>saf</td>
      <td class="a" name="a">c</td>
    </tr>
    <tr>
      <td>saf</td>
      <td>saf</td>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td class="a" name="a">c</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td class="a" name="a">c</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td class="a" name="a">c</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>a</td>
      <td>b</td>
      <td class="a" name="a">c</td>
    </tr>
    <tr>
      <td>a</td>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>b</td>
      <td class="a" name="a">c</td>
    </tr>
    <tr>
      <td>a</td>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>b</td>
      <td class="a" name="a">c</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td class="a">c</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td class="a">c</td>
    </tr>
    <tr>
      <td>a</td>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>b</td>
      <td class="a">c</td>
    </tr>
    <tr>
      <td>a</td>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>b</td>
      <td class="a">c</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td class="a">c</td>
    </tr>
    <tr>
      <td>a</td>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>b</td>
      <td class="a">c</td>
    </tr>
    <tr>
      <td>a</td>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>b</td>
      <td class="a">c</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td class="a">c</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td class="a">c</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>saf</td>
      <td class="a">c</td>
    </tr>
    <tr>
      <td>a</td>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>b</td>
      <td class="a">saf</td>
    </tr>
    <tr>
      <td>a</td>
      <td>saf</td>
      <td>b</td>
      <td>c</td>
      <td>b</td>
      <td class="a">c</td>
    </tr>
    <tr>
      <td>a</td>
      <td>saf</td>
      <td>b</td>
      <td>c</td>
      <td>b</td>
      <td class="a">c</td>
    </tr>
    <tr>
      <td>a</td>
      <td>a</td>
      <td>saf</td>
      <td>c</td>
      <td>b</td>
      <td class="a">c</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td class="a">c</td>
    </tr>
    <tr>
      <td>a</td>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>b</td>
      <td class="a">c</td>
    </tr>
    <tr>
      <td>a</td>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>b</td>
      <td class="a">c</td>
    </tr>
    <tr>
      <td>a</td>
      <td>a</td>
      <td>rauf</td>
      <td>c</td>
      <td>b</td>
      <td class="a">c</td>
    </tr>
    <tr>
      <td>a</td>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>b</td>
      <td class="a">c</td>
    </tr>
    <tr>
      <td>a</td>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>b</td>
      <td class="a">c</td>
    </tr>
    <tr>
      <td>a</td>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>b</td>
      <td class="a">c</td>
    </tr>
    <tr>
      <td>a</td>
      <td>rauf</td>
      <td>saf</td>
      <td>c</td>
      <td>b</td>
      <td class="a">c</td>
    </tr>
    <tr>
      <td>a</td>
      <td>saf</td>
      <td>rauf</td>
      <td>c</td>
      <td>b</td>
      <td class="a">c</td>
    </tr>
  </tbody>
</table>

The hide and show upon checkbox selection in the above solution is applied for the first page . Can you suggest me how could i make it apply to entire table? — techhunter, Nov 01 '16 at 13:00
@safoorasafu, umm! you mean after click on pagination buttons below? it works for me. — Mamdouh Saeed, Nov 01 '16 at 14:54
yes. Sorry for late verification actually. In the above example of your, hide 2 columns in page 1 and go to page 2, the hidden columns will appear here but without header. — techhunter, Nov 01 '16 at 17:31
No problem. yeh, you want to make all hidden columns still hidden for all pages. — Mamdouh Saeed, Nov 01 '16 at 17:33
Sorry jsfiddle become public now. i have to test there because stackoverflow snippet stopped here. — Mamdouh Saeed, Nov 01 '16 at 17:55
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/127120/discussion-between-mamdouh-freelancer-and-safoora-safu). — Mamdouh Saeed, Nov 01 '16 at 18:03
Sorry, really i have to go now have not time to figure now can we resume later about 2 hours. i'll be here. so sorry again — Mamdouh Saeed, Nov 01 '16 at 18:04
That's ok @Mamdouh Freelancer. I have created a sample fiddle here. https://jsfiddle.net/Safoora/2j6w9hqt/ — techhunter, Nov 01 '16 at 18:44
That's ok . No problem. Please update the answer in fiddle if you don't mind. — techhunter, Nov 02 '16 at 07:37
I've to say about your last fiddle, there are some functions about your select max number of rows to show and other search inputs that all may be not affected with updates test and tell me. — Mamdouh Saeed, Nov 02 '16 at 11:53
Super. You are awesome. Can you please suggest me how could I learn good programming as you do? — techhunter, Nov 02 '16 at 16:22
I'm not super i'm learner :) . learning online thats all and forever never stop. SO is one of the most famous resources with w3schools. — Mamdouh Saeed, Nov 02 '16 at 16:36
another one itself. please find it here http://stackoverflow.com/questions/40386067/how-to-filter-for-multiple-values-at-a-time — techhunter, Nov 02 '16 at 19:06
@ Mamdouh Freelancer How could I modify the above code to make check box not applied for first five columns? and also to show bulk columns(like 3-4 columns upon clicking on particular checkbox?) — techhunter, Nov 03 '16 at 09:52

show and hide columns in Datatable upon checkbox selection

1 Answers1

Linked