Question

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

我正在使用上面的dataTable演示，但我试图将新行添加到slideDown而不是show？我尝试下面的代码，但似乎无法显示行。我怎样才能获得这个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;
}

出于某种原因，它会显示表格＆＃39; contactInfo＆＃39;，然后滑动到固定高度的子容器的末尾＆＃39;？

Answer 1

slideDown()似乎不会低于150px的min-height值。所以只是查看最后50px被滑动。我删除了样式以获得完整的幻灯片效果。

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

1 个答案: