datatables - 在 DataTables 1.10 中动态显示/隐藏列

Question

我正在尝试使用 DataTables 主页示例部分的代码在复选框(onChange 事件)上实现动态隐藏/显示。

function(e){
    //e.preventDefault();
    console.log($(this).attr('datacolumn'));

    // Get the column API object
    var column = table.column($(this).attr('datacolumn'));

    // Toggle the visibility
    column.visible( ! column.visible() );
}

但是我得到一个错误。它说 table.column 是“未定义的”

未捕获的类型错误:undefined 不是一个函数

我尝试更改表变量的范围，以便在 Chrome 的控制台中与其交互。据我所知，它只是指向一个 html 内容。

更新

当我指定对象的完整路径时它起作用了。

var column = $('#example').dataTable().api().column($(this).attr('datacolumn'))

Answer 1

另外，这里有一个很简单的脚本根据表格内容动态添加切换按钮在表格顶部的 div 中并绑定(bind)点击以切换每个的可见性

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