将jQuery应用于ajax加载的HTML元素

Question

我正在使用jQuery插件DataTables来整理我的通用html表。我可以使用

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

在加载后为页面上的所有页面加载DataTables插件，但它不会对通过AJAX添加的任何表进行追溯操作（因为此时页面已经加载）。

我如何确保

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

在表上运行是否也添加到页面中？

Answer 1

您可以尝试在jQuery中添加一个ready()事件侦听器，以便在加载每个<table>时（而不是在加载document时）执行操作。

只需添加另一个块，类似于您所拥有的：

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

Answer 2

您可以为新的DOM节点添加侦听器，如果新添加的节点与table.display:匹配，则调用.DataTable()函数

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

Answer 3

因为必须对现有元素调用DataTable函数，所以似乎没有办法让插件自动实例化所有新的table.display元素。尝试在AJAX成功回调中实例化新元素：

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

Answer 4

值得一提的是，我经常使用ajax定期刷新DataTables。以下是我如何在Ajax成功处理程序中实例化DataTables:

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"]
            ]
        });
},