数据表搜索和排序不适用于动态添加的数据

Question

我有一个 DataTable，我需要从 AJAX 调用动态插入/追加数据。对这种 DataTable 进行搜索和排序似乎没有按预期工作。这是我的JSFiddle

代码：

$('#example').DataTable( {
       "iDisplayLength": 10,
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
        "aaData": md,
        "aaSorting": [[1, 'asc']],
        "createdRow": function (row, data, index) {
                $('td', row).eq(0).append('<u><a target="_blank" href="' + data["Data"][0].Link + '">' + data["Data"][0].Value + '</a></u>');
                $('td', row).eq(1).append(data["Data"][1].Value);
                $('td', row).eq(1).prop('title', data["Data"][1].Value);
                for (var i = 2; i < data["Data"].length; i++) {
                    if (data["Data"][i].Value == "green") {
                        $('td', row).eq(i).addClass('highlight1');
                        $('td', row).eq(i).append(data["Data"][i].Value);
                    }
                    else if (data["Data"][i].Value == "red") {
                        $('td', row).eq(i).addClass('highlight3');
                        $('td', row).eq(i).append(data["Data"][i].Value);
                    }
                    else if (data["Data"][i].Value == "blue") {
                        $('td', row).eq(i).addClass('highlight2');
                        $('td', row).eq(i).append(data["Data"][i].Value);
                    }
                    else{
                        $('td', row).eq(i).append(data["Data"][i].Value);
                    }
              }
        },
        "scrollX": true,
        "scrollCollapse": true,
        "fixedColumns": {
           "leftColumns": 2,

        },
        "sScrollXInner": "150%",
        "fixedHeader": true,
        "columnDefs": [{
            "defaultContent": "",
            "targets": "_all",
            "data": null,
            "render":  {
              //  "_":spData[0].Cells[2].Value,
            }
        }],
    } );

对此问题有任何解决方案或想法吗？

Answer 1

我不相信createdRow 正在做你想做的事。根据数据表documentation：

此回调在创建 TR 元素时执行（并且所有 TD 子元素都已插入），或者如果使用 DOM 源进行注册，则允许对 TR 元素进行操作。

createdRow 正在渲染您的 <td> 子元素，并且搜索和排序功能不知道它们的存在。

如果要在 DataTable() 初始化后添加行，则应改为使用 row.add()。有关它的更多信息可以在 DataTable doucmentation 中找到。但这里是更新的JSFiddle，基于您使用row.add() 将您的行添加到表中的原始链接，现在允许搜索和排序对其进行处理。