如何在数据表中添加多行 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()
})