如何在Datatables中添加tr标签行

Question

根据数据表documentation“每个数据元素可以是数组，对象，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();
})

示例输出

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

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()
})