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

Posted 2023-05-07

【中文标题】数据表搜索和排序不适用于动态添加的数据

【英文标题】：DataTables Searching and Sorting not working for dynamically added Data

【发布时间】：2016-11-14 03:56:05

【问题描述】：

我有一个 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,
            
        ],
     );

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

【参考方案1】：

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

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

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

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

【讨论】：

谢谢@Jeremy Southard！该解决方案对我有用！