javascript - DataTable slidedown row.child()

Question

我想在单击按钮时为每一行向下滑动一个 div。目前 dataTable row.child() 以这种形式调用格式函数。

引用 fiddle :http://jsfiddle.net/dhirajbodicherla/189Lp6u6/16/

function format ( d ) {
  return '<div class="slider">Test Message</div>';
}

是否可以像下面这样为每一行返回 div

<div class="slider">Test Message</div>

function format(d){
  return $('div.slider');
}

最后 jQuery 看起来像这样。

$('#example tbody').on('click', 'td.details-control', function () {
  var tr = $(this).closest('tr');
  var row = table.row( tr );

  if ( row.child.isShown() ) {
    // This row is already open - close it
    row.child.hide();
    tr.removeClass('shown');
  } else {
    // Open this row
    row.child( format(row.data()) ).show();
    tr.addClass('shown');
  }
});

Answer 1

您可以为 .player 元素添加 style="display: none" 并在必要时向上/向下滑动该元素。

例如:

$('#example tbody').on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );

    if ( row.child.isShown() ) {
         row.child().find('.player').slideUp(400, function(){
            // This row is already open - close it            
            row.child.hide();

            tr.removeClass('shown');
         });
    }
    else {
        // Open this row
        row.child( format(row.data()) ).show();
        row.child().find('.player').slideDown();
        tr.addClass('shown');
    }
} );

您还可以在 format() 函数中返回 jQuery 元素，row.child() 也接受 jQuery 作为参数。参见 row.child() API 方法获取更多信息。

参见 updated jsFiddle用于代码和演示。

参见 Sliding child rows发布替代解决方案。