数据表 - 行向下滑动而不是显示

Posted 2023-03-06

【中文标题】数据表 - 行向下滑动而不是显示

【英文标题】：datatables - row slide down instead of show

【发布时间】：2016-01-24 12:09:16

【问题描述】：

https://datatables.net/examples/api/row_details.html

我正在使用上面的 dataTable 演示，但我试图让新行滑动而不是显示？我尝试了下面的代码，但似乎无法让该行出现。我怎样才能得到这个 slideDown/slideUp 行为？

row.child('<div class="child-container">'+contactInfo + editorRooms+'</div>').slideDown();

----[更新]----

然后我发现了这个：

https://www.datatables.net/blog/2014-10-02

我无法让这条线工作：

row.child( format(row.data()), 'no-padding' ).show();

所以改为这样做：

JQUERY/JS:

row.child('<div class="child-container">'+contactInfo + editorRooms+'</div>').show();
tr.addClass('shown');
tr.next('tr').addClass('open'); //used to determine the new row
$('div.child-container', row.child()).slideDown();

CSS：

table.dataTable .child-container
  
    display: none;
    min-height:150px;
    max-height: 200px;
    overflow-y: auto;


table.dataTable tbody tr.open > td 

    padding: 0;

由于某种原因，它显示了表格'contactInfo'，然后滑到固定高度'child-container'的末尾？

【参考方案1】：

看起来slideDown() 不会在min-height 150px 的值以下初始化。所以只是查看最后 50px 的滑动。我删除了样式以获得完整的幻灯片效果。