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是“未定义的”

未捕获的TypeError：undefined不是函数

我尝试更改table-variable的范围，以便我在Chrome控制台中与它进行交互。而且据我所知，它只是指向一个html内容。

更新

当我指定对象的完整路径时，它有效。

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

Answer 1

另外，这是一个非常简单的脚本根据表格内容动态添加切换按钮在桌子顶部的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>

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

1 个答案: