Question

我使用过jquery datatable插件。

我有以下问题。

HTML：

<input type="button" value="click" id ="button" />

<table id="testTable">
    <thead>
        <td>
            col1
        </td>
        <td>
            col2
        </td>
    </thead>    
</table>

JS：

(function(){    
    var firstData = "<tr>" +
        "<td>" +
        "cell11" +
        "</td>" +
        "<td>" +
        "cell12" +
        "</td>" +
        "</tr>" +
        "<tr>" +
        "<td>" +
        "cell21" +
        "</td>" +
        "<td>" +
        "cell22" +
        "</td>" +
    "</tr>";
    debugger;
    $(firstData).appendTo($('#testTable'));
    $('#testTable').dataTable();
})();

$('#button').click(function(){

    var secondData = "<tr>" +
        "<td>" +
        "cell31" +
        "</td>" +
        "<td>" +
        "cell32" +
        "</td>" +
        "</tr>" +
        "<tr>" +
        "<td>" +
        "cell41" +
        "</td>" +
        "<td>" +
        "cell42" +
        "</td>" +
        "</tr>";
    $('#testTable tbody').empty().append($(secondData));
});

我使用firstdata将表初始化为数据表。排序，搜索等正如预期的那样完美。但我后来用secondData改变了身体。现在还对第一个数据进行排序和搜索。如何解决这个问题？

Answer 1

您必须完成dataTables API。您可以通过javascript或jQuery操纵<table>的内容，但是如果不使用API，jQuery dataTables就无法知道您做了什么操作。这就是删除后仍然出现旧行的原因。

您正在使用dataTables 1.10.x，并且在该版本中，API已经大大简化。只需使用

<dataTables instance>.row.add(..)

您想要注入<tr>个HTML的大量HTML：

dataTable.clear();
$secondData = $(secondData);
for (var tr=0;tr<$secondData.length;tr++) {
   var tds = $($secondData[tr]).find('td');
   var cols = [];
   for (var td=0;td<tds.length;td++) {
       cols.push($(tds[td]).html());
   }
   dataTable.row.add(cols);
}
dataTable.draw();

它看起来像很多代码，但只是因为我们在这里解析了一段HTML。通常你会插入像这样的行

dataTable.row.add(['cell31', 'cell32']);

分叉小提琴 - ＆gt;的 http://jsfiddle.net/QgGKD/

Jquery数据表未使用html数据更新

1 个答案: