如何在数据表中添加 tr 标记行

Question

根据数据表文档，"每个数据元素可以是数组，对象，Javascript对象实例或tr元素。如果我使用 ajax 返回一个字符串数组，然后使用 rows.add 方法，它似乎将每个字符解释为单元格值：

.HTML

<table id="dt">
  <thead>
    <tr>
      <th>column 1</th><th>column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>row 0 col 1;</td><td>row 0 col 2;</td></tr>
  </tbody>
</table>
<button id="mybutton" type='submit'>Add rows</button>

.JS

var data = ["<tr><td>row 1 col 1;</td><td>row 1 col 2;</td></tr>", "<tr><td>row 2 col 1;</td><td>row 2 col 2;</td></tr>"];
var datatable = $('#dt').DataTable();
$("body").on('click', '#mybutton', function(evt){
    console.log ("button clicked");
    datatable.rows.add(data);
    datatable.draw();   
    evt.preventDefault();
})

示例输出

我创建了一个简单的小提琴来展示这一点。我做错了什么？

Answer 1

由于此代码直接更改 HTML，因此您需要销毁并重建数据表，使其显示在数据对象中。 此代码执行此操作。

        $(document).ready(function () {
            var md = ["<tr><td>row 1 col 1;</td><td>row 1 col 2;</td></tr>", "<tr><td>row 2 col 1;</td><td>row 2 col 2;</td></tr>"];
            var datatable = $('#dt').DataTable();

            $('#mybutton').on('click', function (evt) {
                datatable.destroy();
                $.each(md, function (i, item) {
                    $('#dt tbody').append(item)
                });
               datatable = $('#dt').DataTable();
            })
        });

Answer 2

我通常不会如上所述将html添加到数据中。只需传入数据即可。但是，如果您有实际理由这样做，这里有一种方法可以工作。

var data = ["<tr><td>row 1 col 1;</td><td>row 1 col 2;</td></tr>", "<tr><td>row 2 col 1;</td><td>row 2 col 2;</td></tr>"];
var datatable = $('#dt').DataTable();
$('#mybutton').on('click',  function(evt){
  $.each(data, function(i, item){$('#dt tbody').append(item)});
  datatable.rows.invalidate().draw()
})

Answer 3

这实际上是我的做法。

var data = [["row 1 col 1","row 1 col 2;"],[ "row 2 col 1;", "row 2 col 2;"]];
var datatable = $('#dt').DataTable();
$('#mybutton').on('click',  function(evt){
  datatable.rows.add(data).draw()
})