动态添加行时未应用数据属性

Question

当我通过 javascript 代码向数据表添加一行时，搜索和排序选项未被应用。我这样修改了 data-attributes example：

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

$(document).ready(function() {
var t = $('#example').DataTable();
t.row.add($('<tr><td data-search="Tiger Nixon">T. Nixon</td><td>System Architect</td><td>Edinburgh</td><td>61</td><td data-order="1303689600">Mon 25th Apr 11</td><td data-order="320800">0,800/y</td></tr>'));
t.draw();

} );

但是，如果我随后搜索“Tiger”，则什么也找不到。

这是预期的行为吗？如果是，有解决办法吗？

JSFiddle

上的完整示例

Answer 1

问题源于这样一个事实，即 data-* 属性只有在初始 table 中存在时才会被检测到。因此，作为解决方法，我想出了以下解决方案：

在初始 table 中用任何必需的数据-* 属性定义一个虚拟行：

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr style = "display: none;">
            <td data-search="">/td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>

然后可以在启动时删除该行：

$(document).ready(function() {
var t = $('#example').DataTable();
t.row(0).remove();
t.row.add($('<tr><td data-search="Tiger Nixon">T. Nixon</td><td>System Architect</td><td>Edinburgh</td><td>61</td><td data-order="1303689600">Mon 25th Apr 11</td><td data-order="320800">0,800/y</td></tr>'));
t.draw();

});

现在可以搜索“Tiger”了

动态添加行时未应用数据属性

Data attributes are not applied when I add a row dynamically

datatables