jquery - 在选择复选框时显示和隐藏数据表中的列

Question

目前我正在研究数据表。在这里，我尝试根据复选框选择显示和隐藏表列。对于普通的 html 表，我知道如何使用 jquery 启用此服务。但同样不适用于数据表。任何人都可以建议我如何做到这一点吗？

$(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 1

更新:要使所有列仍通过分页按钮隐藏，请参阅此

Fiddle

试试这个例子

$(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>