[英]how to show and hide columns of using datatable jquery
我需要在进行javascript测试后显示和隐藏数据表的列,但它不能正常工作。
这是我的测试javascript:
if ( $('#commune_to_display').val()==""){
$('#utable td:nth-child(2)').hide();
$('#commune_to ').hide();
}
此测试仅在数据表的第一页中起作用,在分页之后列仍然可见。
我该如何解决? 感谢帮助
您可以显示/隐藏列,如下所示。 只需将3
和4
替换为实际的列索引即可。
var table = $('#utable').DataTable();
table.column(3).visible(true); // To show
table.column(4).visible(false); // To hide
像这样的JavaScript代码:
$(document).ready(function() {
var table = $('#example').DataTable( {
"scrollY": "200px",
"paging": false
} );
$('a.toggle-vis').on( 'click', function (e) {
e.preventDefault();
// Get the column API object
var column = table.column( $(this).attr('data-column') );
// Toggle the visibility
column.visible( ! column.visible() );
} );
} );
像这样的HTML代码:
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
</table>
您可以在此处查看并运行完整示例: https : //datatables.net/examples/api/show_hide.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.