我发现这是一个非常简单的脚本,可以根据表格顶部的div中的表格内容动态添加切换按钮,并点击一个点击以切换每个按钮的可见性。我希望在其中添加名称而不是索引号,任何人都可以帮助。
$(document).ready(function() {
var table = $('#example').DataTable();
// for each column in header add a togglevis button in the div
$("#example thead th").each( function ( i ) {
var name = table.column( i ).header();
var spanelt = document.createElement( "button" );
spanelt.innerHTML = name.innerHTML;
$(spanelt).addClass("colvistoggle");
$(spanelt).attr("colidx",i); // store the column idx on the button
$(spanelt).on( 'click', function (e) {
e.preventDefault();
// Get the column API object
var column = table.column( $(this).attr('colidx') );
// Toggle the visibility
column.visible( ! column.visible() );
});
$("#colvis").append($(spanelt));
});
} );
<div id="colvis"></div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<!-- here your col header -->
</thead>
<tbody>
<!-- here your table data -->
</tbody>
</table>