0

我确信这在某种程度上是可能的，但我正在做的事情是行不通的。

$('#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，因此数据是从 aData 14 而不是 15 获取的。因此需要对格式化程序进行某种测试，以找出它实际在做什么......或者不要使用 $ ('td:eq(14)') 来确定列。我只是不知道该怎么做。

一个简化的示例在http://jsfiddle.net/nbscb/ 请注意，当检查“单击我”时，Col3的数据是不正确的。

4

4 回答 4

0

这应该有效。

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

演示

于 2012-10-05T17:11:21.670 回答
0

您不需要每次.change触发时都重新创建数据表。这是使用全局变量的好时机：

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/

于 2012-10-05T17:20:16.950 回答
0

听起来像与此线程类似的问题：

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

于 2013-10-08T03:08:37.093 回答
-1

问题是格式。在 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。

于 2012-10-11T17:02:17.023 回答