數據表向下滑動 row.child()

Question

單擊按鈕時，我想為每一行向下滑動一個 div。 當前 dataTable row.child() 以這種形式調用格式函數。

參考小提琴： 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 方法。

有關代碼和演示，請參閱更新的 jsFiddle 。

有關替代解決方案，請參閱滑動子行帖子。

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');
    }
});