Question

我确信这有可能是怎样的，但我正在做的事情不起作用。

$('#campaign_creative_performance-table #show_thumb').change(function() {
    var show = ($(this).is(':checked')) ? true : false,
        oTable = $('#campaign_creative_performance-table table.sortable').dataTable();
    oTable.fnSetColumnVis(14, show ? false : true);
    oTable.fnSetColumnVis(15, show);
});

这应该隐藏第14列并显示第15列，反之亦然。

它正在做的是交换列标题并更改列的宽度，但内容不会改变。

我已经尝试将重绘标记放在第一个上，但没有变化。

其他信息： 我通过sAjaxSource获取数据并通过fnRowCallback格式化它。这两列的格式如下：

$('td:eq(14)', nRow).html('<p class="limit160" title="'+aData[14]+'">'+aData[14]+'</p>');
$('td:eq(15)', nRow).html('<img src="'+aData[15]+'" />');

进一步调查 问题在于fnRowCallback中的格式化。隐藏第14列，使15成14，所以数据来自数据14而不是15.所以需要进行格式化程序可以做的某种测试，以找出它实际上在做什么列...或者不要使用$ （'td：eq（14）'）确定列。我只是不确定该怎么做。

http://jsfiddle.net/NbSCb/的一个简单示例请注意，选中“click me”时，col3的数据不正确。

Answer 1

这应该有用。

$('#campaign_creative_performance-table #show_thumb').change(function() {
    table.fnSetColumnVis(14, !this.checked);
    table.fnSetColumnVis(15, this.checked);
});

demo

Answer 2

每次触发.change时，您无需重新创建dataTable。这是使用全局变量的好时机：

oTable = $('#campaign_creative_performance-table table.sortable').dataTable();

$('#show_thumb').change(function() {
    var show = $(this).is(':checked'); // Boolean
    oTable.fnSetColumnVis(4, !show);
    oTable.fnSetColumnVis(5, show);
});

http://jsfiddle.net/JPU7A/

Answer 3

听起来像这个问题类似的问题：

[http://www.datatables.net/forums/discussion/16236/showinghiding-columns-with-ajax/p1] [1]

Answer 4

问题在于格式化。在fnRowCallback内部格式化时必须确定格式决策。基本上，如果您隐藏第14列，第15列将成为第14列并采用其格式化。

解决方案是使用if语句查看其规则的外部复选框。

if($('#show_thumb').is(':checked')) {
    $('td:eq(14)', nRow).html('<img src="'+aData[15]+'" style="max-height:100px;" />');
} else {
    $('td:eq(14)', nRow).html('<p title="'+aData[14]+'">'+aData[14]+'</p>');
}

请注意，两个格式化选项都会影响第14行，但分别使用数据点15和14。

DataTables隐藏一列并显示另一列

4 个答案: