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正在按你的意愿行事。根据DataTables documentation：

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

您的<td>子元素由createdRow呈现，搜索和排序功能不知道它们的存在。

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

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

1 个答案: