javascript - 数据表追加 html 但刷新了？

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

之所以发生这种情况，是因为您对名称列应用了排序，因此数据表非常智能，它会在需要的位置添加行...所以如果您想在名称的最后一个删除排序选项中添加该行专栏...

这是一个小的代码更改:

$(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