目前我正在研究Datatable。在这里,我尝试根据复选框选择显示和隐藏表格列。对于普通的html表,我知道如何使用jquery启用此服务。但同样不适用于Datatable。任何人都可以建议我怎么做?
$(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() );
});
答案 0 :(得分:2)
更新:要使用分页按钮隐藏所有列,请参阅此
试试这个例子
$(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') );
});
});
&#13;
<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>
&#13;