javascript - 数据表切换列可见性延迟/效果

Question

关于 Datatables website 的教程足够清楚了:

在我告诉 Datatables 我正在谈论哪一列后，我只需将切换按钮放入:

column.visible( ! column.visible() );

或者，以更完整的方式，我可以写:

if ( column.visible() === true ) {
    column.visible( false );
  } else {
    column.visible( true );
  }

有没有办法对此进行某种“计时”，也许可以使该列慢慢淡出，而不是仅仅消失/重新出现？

我找不到任何相关文档。

Answer 1

我绝对不建议淡出一列。它非常丑陋并且需要永远。最后的崩溃还是会发生。

无论如何，我已经使用简单的 jQuery 在 datatables 之外完成了此操作。基本上，您保持 html 不变，但使用常规 jQuery 而不是数据表来使事情发生。这是一个例子:

 $('a.toggle-vis').on( 'click', function (e) {
   var column = $(this).attr("data-column") - 1;

   $('.yourDataTable td:nth-child('+column+'), .yourDataTable th:nth-child('+column+')'  ).fadeOut();

   return false;
 }

尽管如此，我还是建议不要使用 :nth-child。如果您通过循环生成数据表，我只需向每一列添加一个 class="column_#" 并使用 jQuery 来获取它。 (# 是列号)

编辑:添加 settimeout 示例

if ( column.visible() === true ) {
    setTimeout(function(){
      column.visible( false );
    }, 500); //delays the function with 0.5 seconds
  } else {
    column.visible( true );
  }