數據附加到通過AJAX jQuery的數據表未使用數據表分頁和功能

Question

http://www.datatables.net/

jQuery的數據表是一個插件來添加過濾器，分頁，以及搜索輸入。我一直在使用它們和我的Laravel應用程序一起將數據放入並且工作正常。

我現在已經添加了一個下拉列表過濾器從數據表中分離，我已經添加了一些jQuery代碼看起來像這樣：

$('.dropdownselect').change(function() { 
    $('.table').find('tr').remove(); 

    $.post('/schedules', { value: $(this).val() }, function(result) { 
     $.each(result, function(k, v) { 
      $('.table-body').append('<tr><td>' + v.name + '</td></tr>'); 
     }); 
    }); 
}); 

它只是消除了對變化的價值和附加由schedules返回新值進入表格。實際上在那裏還有4個<td>，但爲了簡化目的，我只包含了一個。

使用上面的代碼時，它不保持datatables插件的功能。

這是爲什麼？有沒有辦法解決它？或者更好的方法來做到這一點？

Answer 1

只需通過AJAX請求向您的DOM添加新行就不會將這些更改通知給DataTables對象容器。您需要使用Datatable.row.add()來插入行，然後重新繪製表格以直觀地更新表格顯示以說明此新數據。

請嘗試以下操作。

$('.dropdownselect').change(function() { 
    $('.table').find('tr').remove(); 
    var t = $('.table').DataTable(); 

    $.post('/schedules', { value: $(this).val() }, function(result) { 
     $.each(result, function(k, v) { 
      t.row.add([v.name, v.otherParam, v.anotherParam]); 
     }); 
     t.draw(); 
    }); 
});