將jQuery應用到由ajax加載的HTML元素中

我正在使用jQuery插件DataTables來修飾我的泛型html表。我可以用將jQuery應用到由ajax加載的HTML元素中

<script> $(document).ready(function() { $('table.display').DataTable(); }); </script>

要加載的DataTable插件的加載它後，頁面上的所有網頁，但它不追溯的任何表工作，通過AJAX增加（因爲頁面已經在那裝點）。

我如何確保該

$('table.display').DataTable();

運行在桌子上添加到頁面中呢？

來源

2015-11-07 user3225440

是您的AJAX更換表在那裏與之前新的數據，或者乾脆裝表的頁面後最初加載？ – DelightedD0D

@ DelightedD0D我已經嘗試過兩種方法，無法上手。基本上，我在頁面上有一個空的跨度，ID爲「table」，然後使用innerHTML將表格放入頁面（因爲這就是我們被教導如何做Ajax的原因）。我也嘗試將它插入最初使用相同方法加載的表（使用表的ID代替）。但是，即使初始表正常工作，只要我通過該方法輸入新數據，它就會丟失所有Datatables排序功能。 – user3225440

是的，那是我想到的。如果您自己手動更改表中的數據，則必須銷燬舊的數據表並初始化一個新的數據表。看到我的答案在下面，它顯示了一個方法來做到這一點。 – DelightedD0D

您可以嘗試在jQuery中添加一個ready()事件偵聽器，以在加載每個<table>（而不是加載document時）時採取行動。

只需添加另一個塊，類似於你有什麼：

$('table.display').ready(function() { 
    $(this).DataTable(); 
});

來源

2015-11-07 03:55:14

您可以添加一個偵聽新的DOM節點，並調用.DataTable()功能，如果新加入的節點匹配table.display：

$(document).on('DOMNodeInserted', 'table.display' function(e) { 
    $(this).DataTable(); 
});

來源

2015-11-07 03:56:59 Vince

因爲必須在現有元素上調用DataTable函數，所以似乎沒有辦法讓所有新的table.display元素自動通過插件實例化。嘗試在你的AJAX成功回調實例化新元素：

$.ajax({ 
    url: '/your/url', 
    type: 'POST', 
    success: function (data) { $('table.display').DataTable(); } 
});

來源

2015-11-07 03:57:32 benjarwar

對於它的價值，我經常有數據表正在使用AJAX週期性地刷新。這裏是我實例化我的數據表在我的阿賈克斯成功處理程序：

success: function (response) { 
     var $table = $('#user-table'); 
     var $body = $('#user-table-body'); 
     if ($.fn.DataTable.isDataTable($table)) { // if already init, destroy it 
      $table.dataTable().fnDestroy(); 
      $body.empty(); // empty body of table 
     } 
     $body.html(response['users-table']) // set new data to body of table 
     $table.DataTable({ // init datatable 
      "order": [ 
       [2, "desc"] 
      ] 
     }); 
},

來源

2015-11-07 04:06:28 DelightedD0D

將jQuery應用到由ajax加載的HTML元素中

回答

相關問題