safoora safu safoora safu - 1 month ago 14
CSS Question

show and hide columns in Datatable upon checkbox selection

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() );
});

Answer

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>

Comments