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

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 :

This callback is executed when a TR element is created (and all TD child elements have been inserted), or registered if using a DOM source, allowing manipulation of the TR element.

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

您应该改为使用 row.add()如果你想在 DataTable() 之后添加你的行已经初始化。有关它的更多信息，请参见数据表 doucmentation .但这是更新的 JSFiddle基于您使用 row.add() 的原始链接将您的行添加到表中，现在可以对它们进行搜索和排序。