Question

不确定是什么问题，对我来说，我的代码有正确的逻辑。但不知何故，html在第二次点击后没有停留。我希望我的自定义html会在新添加的tr之后出现。

我的功能

function appendRow(name, position, office, age, date,salary) {
    var t = $('#example').DataTable();

    var node = t.row.add([
      name,
      position,
      office,
      age,
      date,
      salary,
    ]).draw().node();

    var detail_row = '';

    detail_row = '<h3>Custom HTML</h3>';

    $(node).addClass('result-row');

    node = node.outerHTML += detail_row;

    $(node).hide().fadeIn('normal');
  }

https://jsfiddle.net/282w8yfk/

Answer 1

它以这种方式发生，因为你在name列上应用了排序，所以datatable很聪明，它添加了它需要的行...所以如果你想在名字的最后删除排序选项中添加它列...

这是一个小代码更改：

$(document).ready(function() {
  /* Formatting function for row details - modify as you need */
  function format(d) {
    console.log(d);
    // `d` is the original data object for the row
    return '<table cellpadding="4" cellspacing="0" border="0" style="padding-left:50px;">' +
      '<tr>' +
      '<td>Name:</td>' +
      '<td>' + d[0] + '</td>' +
      '</tr>' +
      '<tr>' +
      '<td>Full Name:</td>' +
      '<td>' + d[4] + '</td>' +
      '</tr>' +
      '<tr>' +
      '<td>Extra info:</td>' +
      '<td>And any further details here (images etc)...</td>' +
      '</tr>' +
      '</table>';
  }

  var table = $('#example').DataTable({
    "columnDefs": [{
        "targets": [4],
        "visible": false,
        "searchable": false
      }]
      /* the problem is here, it won't work if I enable sorting*/
  });

  function appendRow() {
    var t = $('#example').DataTable();

    var node = t.row.add([
      "James Bond",
      "Spy", "55", "$9000", "James Bond Larry"
    ]).draw().node();

    console.log(node);
    $(node).addClass('result-row').hide().fadeIn('normal');
  };

  $('#add').click(function() {
    appendRow();
  });

  $('#example tbody').on('click', '.result-row', 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');
    }
  });
});

reference 1 - sort

reference 2 - row.add

数据表附加HTML但刷新了吗？

1 个答案: