如何在 jQuery 数据表中添加存在数据顺序的行

Question

我遇到了 jQuery DataTables 的问题，当我包含用于排序的数据顺序属性时，动态添加的行无法正确显示。这些行是通过 JavaScript 添加的，虽然操作按钮可见，但具有数据顺序属性的日期列不会显示。

更重要的是，我收到错误：“DataTables 警告：表 id=example - 请求第 4 行第 0 列的未知参数“[object Object]”。有关此错误的更多信息，请参阅 http://datatables。 net/tn/4" 当我单击“添加行”时。

我这里有一个演示：

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Date</th>
      <th>Actions</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td data-order="1714043746">November 2024</td>
      <td><button>
          Edit
        </button></td>
    </tr>
    <tr>
      <td data-order="1714043745">October 2024</td>
      <td><button>
          Edit
        </button></td>
    </tr>
    <tr>
      <td data-order="1714043744">Mai 2024</td>
      <td><button>
          Edit
        </button></td>
    </tr>

  </tbody>
</table>
<button id="add">
  Add row
</button>

$(document).ready(function() {
  let myTable = $('#example').DataTable({
    responsive: true
  });

  $('#add').on('click', function() {
    var response = {
      data: [
        'Nov 2016',
        '<button>Edit</button>'
      ]
    };
    myTable.row.add(response.data).draw(false);
  })
});

https://jsfiddle.net/9fpj5y0c/

如果我删除数据顺序属性，那么它就可以正常工作。我需要使用数据顺序来完成这项工作，因为我需要能够正确对列进行排序。

Answer 1

试试这个，当我打开你的小提琴时它起作用了 $(文档).ready(函数() { 让 myTable = $('#example').DataTable({ 响应：真实 });

  $('#add').on('click', function() {

    var timeStamp = new Date('Nov 2016').getTime() / 1000;
    var newRow = $('<tr>')
      .append($('<td data-order="' + timeStamp + '">Nov 2016</td>'))
      .append($('<td>').html('<button>Edit</button>'));

    myTable.row.add(newRow).draw(false);
  });
});