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：

當TR元素創建（和所有TD子元素已被插入）此回調被執行，或者如果使用DOM源，允許TR元件的操縱註冊。

你<td>子元素都被createdRow呈現與搜索和排序功能，不知道它們的存在。

如果您想在DataTable()初始化後添加行，則應該使用row.add()。有關它的更多信息可以在DataTable doucmentation中找到。但是，根據您使用row.add()的原始鏈接更新JSFiddle將您的行添加到表中，以便現在可以對它們進行搜索和排序。