Question

我想在单击按钮时向下滑动每行的div。目前dataTable row.child（）以这种形式调用format函数。

请参阅小提琴：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

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

例如：

$('#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帖子。

Answer 2

通过使用此代码，避免从DB进行额外的数据交易

$('#mytable').on('click', '.details-control', function () {
    var tr = $(this).closest('tr');
    var row = table.row(tr);
    if (row.child() != null) {
        // This row is already open - close it
        if (row.child.isShown()) {
            row.child.hide();
            tr.removeClass('shown');
        } else {
            row.child.show();
            tr.addClass('shown');
        }
    } else {
        var childTable = format(id, date);
        row.child(childTable).show();
        tr.addClass('shown');
    }
});

DataTable slidedown row.child（）

2 个答案: