DataTable滑下行.child()

Question

当按钮被点击时，我想让每一行的 div 向下滑动。目前，dataTable 的 row.child() 调用该格式中的 format 函数。

参考 fiddle：http://jsfiddle.net/dhirajbodicherla/189Lp6u6/16/

function format ( d ) {
  return '<div class="slider">Test Message</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');
  }
});

- DPS

---

{btsdaf} - artgb

question is edited. - DPS

这可能会有所帮助-https://stackoverflow.com/questions/5309326/how-to-write-in-jquery-function-which-return-new-div - T.Shah

{btsdaf} - DPS

{btsdaf} - ProEvilz

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。

有关替代解决方案，请参见滑动子行文章。

- Gyrocode.com

---

{btsdaf} - DPS

我找到了答案。函数格式化(d) { 返回$('div.slider').html(); } - DPS

Answer 2

为了避免从数据库中进行一些额外的数据交易，可以使用以下代码。

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

- Deepalakshmi.K

---

请使用适当的缩进。 - jrswgtr