有没有办法使用 DataTable 将表的列放在 div 中？答案

【问题标题】：Is there a way to put columns of a table in divs using DataTable?有没有办法使用 DataTable 将表的列放在 div 中？
【发布时间】：2017-07-07 15:36:29
【问题描述】：

所以我要做的是让用户可以选择在生成表格后显示表格的哪些列。我已经有执行此操作的功能，在用户更改其选项后，它会破坏当前表，然后使用某些列的不同可见性设置重新初始化它。虽然这可行，但它有点慢，看起来不像说的那么漂亮，列就消失了。我想如果我将列放在唯一 id 的 div 中，然后在用户取消选择它们时使用 jquery 编辑它们的 css 说 display: none;，它会更快、更有吸引力，但我还没有找到一种方法将列放在 div 中。

【问题讨论】：

标签： javascript jquery html css datatables

【解决方案1】：

您不需要将列放在 div 中。

myFunction = function(){
  $('.first').css('display','none')
}

codepen

【讨论】：

在这种情况下，'.first' 是什么？
@jz8888 查看代码笔。 'first' 是您想要消失的列的和标签的类名。

【解决方案2】：

可能是一个更好的解决方案，但您可以使用 CSS nth-child (https://www.w3schools.com/cssref/sel_nth-child.asp) 属性和 jQuery 的 .index() 来识别您要删除的列并从每个表行中删除该列。

这样的事情可能会起作用（假设您有一个包含<th> 元素的标题行）：

$('table th').on("click", function() {
    var index = $(this).index() + 1;
    $.each('table tr', function() {
        $(this).find('td:nth-child(' + index + ')').hide();
    });
});

【讨论】：

我知道在 'table th' 中应该是我要隐藏的列的第 th，但是 'table tr' 值应该是什么？我按原样运行该部分，并且不断收到TypeError: Cannot use 'in' operator to search for '1' in table tr

【解决方案3】：

回答我自己的问题，因为我设法找到了一个名为 column().visible 的函数，它可以按索引定位列并更改它们的可见性。它运行良好，我无法实施其他人发布的解决方案。

对于稍后进来的任何人来说，如果你可以将列放在 div 中，据我所知你不能，但你可能不需要做任何事情。

【讨论】：