Datatable插件無法自定義動態加載的表

Question

在我的單頁應用程序中，所有靜態資源，js文件都由主頁加載。然後，表格將在用戶單擊時動態加載。但是，數據表定製不適用於新加載的表格div元素。

在其最簡單的形式的代碼，

<div>Home Page</div> 
<script src="jquery.js"></script> 
<script src="datatable.js"></script> 
<script src="datatable_jquery_ui.js"></script> 
<script> 
    $("div").on('click', function(e){ 
     console.log("div is clicked") 
     $("div").html("<table><tr><td>jasmine</td><td>december</td></tr></table>") 
     $("div table").dataTable() 
    }) 
</script> 

當用戶點擊的div元素，該表被加載，但該代碼，$("div table").dataTable()沒有效果。

Answer 1

您缺少thead和tfoot標記。 dataTable需要這些標籤進行初始化。

例如：

$("div").html("<table><thead><tr><td>jasmine</td><td>december</td></tr></thead><tfoot></tfoot></table>")