AJAX刷新后在外部加载的DataTable上使用jQuery

Question

因此，我的页面上有一个id为“ machine-content”的div，用于显示有关我的计算机的各种信息。 我主要在表格中显示信息。 我正在尝试使用DataTables（ https://datatables.net/ ），但是初始化表时遇到问题。 单击操作（即“显示维修情况”，“显示工作时间”）后，我从外部html加载表元素，并根据所选操作通过AJAX将其填充数据。 这就是我的文件的外观。

在index.php中（将jquery和datatables加载到头部）：

<script src="data.js"></script>

...
<div id="machine-content" class="col-md-9" style="float:right">
</div>  
...

外部html非常简单：

<h1 id="machine-content-h1"></h1>
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%"></table>

然后，我有了控制index.php的data.js。 在那里，我通过AJAX处理点击操作和表格加载。 所有数据均已正确加载，但是当我想要初始化DataTable（以获取搜索字段，分页等）时，它不起作用。 据我所知，我必须在数据加载后对其进行初始化，无论如何，我也曾尝试过对其进行初始化。 这是data.js：

//EXAMPLE of handling chosen action with button click
//I TRIED putting //I TRIED putting $.('#example').DataTable(); HERE
//wrapped in $(document).ready

$('#arentals').click(function(){
            $( '#machine-content' ).load("/gui/machines/machines/templates/table.html", function() {
                load_service_table("RENTALS");      
     });
}); 

function load_service_table(action){
    var action_url;

    switch(action) {
        case 'REPAIRS':
            action_url='/gui/machines/machines/show_services.php';
            break;
        case 'RENTALS':
            action_url='/gui/machines/machines/show_rentals.php';
            break;
        case 'REVENUES':
            action_url='/gui/machines/machines/show_revenues.php';
            break;
        default:
            action_url='/gui/machines/machines/show_hours.php';
    }

    $.ajax({
            url: action_url,
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            dataType: "html",
            type: "POST",
            success: function(data) {
                //I TRIED putting $.('#example').DataTable(); HERE
                $( '#machine-content-h1' ).text(action);
                $( '#example' ).html(data); 
                //I ALSO TRIED putting $.('#example').DataTable(); HERE
            }       
    });
    //AND HERE
}

PHP函数很简单，并且在AJAX中仅返回表的head和body元素，因此我认为没有问题。 所以我的问题是：我怎么初始化这个东西？ 我的意思是，如果我能够在AJAX成功函数中将html设置为#example，为什么不能在那里初始化相同的元素？ 任何帮助将不胜感激。

编辑
我总是收到此错误：jquery.dataTables.min.js：65未捕获的TypeError：无法读取未定义的属性'aDataSort'

解

我只添加了$（'＃machine-content'）。find（'＃example'）。DataTable（）; 到AJAX成功函数，现在看起来像这样：

$.ajax({
            url: action_url,
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            dataType: "html",
            type: "POST",
            success: function(data) {

                $( '#machine-content-h1' ).text(action);
                $( '#example' ).html(data); 
                $('#machine-content').find('#example').DataTable();
            }       
    });

Answer 1

数据表具有内置的ajax方法

$('#myTable').DataTable( {
    ajax: '/api/myData'
} );

https://datatables.net/manual/ajax#Loading-data

或使用：

$('#machine-content').find('.table').DataTable();

Answer 2

我知道这篇文章比较老，所以现在可能对您没有帮助，但对于遇到此问题的其他人来说，则无济于事。

类似于以下内容的东西应该起作用：

var adminUsers = {

list: () => {

var action = 'list_users';
var url = base_url+'index.php/admin/users/io';
var data = { }

var response = ajaxRequest.post(action, url, data);

response.then(
    function(obj){
        var data = JSON.parse(obj);
        console.log(data);
        //console.log(data.data.result);
        $.each(data.data, function(i,e){
            var html = '';
            html = html + '<tr>';
            html = html + '<td>'+e.id+'</td>';
            html = html + '<td>'+e.username+'</td>';
            html = html + '<td>'+e.first_name+'&nbsp;'+e.last_name+'</td>';
            html = html + '<td>'+e.status+'</td>';
            html = html + '<td>'+e.locked+'</td>';
            html = html + '<td>'+e.uuid+'</td>';
            html = html + '</tr>';
            $('#users-list tbody').append(html);
        });

        $('#users-list').DataTable(adminUsers.dataTable());
    },
    function(jqXHR, textStatus, errorThrown){
        ajaxRequest.error(jqXHR, textStatus, errorThrown);
    });
},
dataTable: () => {
var config = {
        initComplete : function() {

            $("#users-list_filter").detach().appendTo('#search');
            $("#users-list_length").detach().appendTo('#display_length');
            $("#users-list_length").attr('style', 'margin-right:10px;');
            $("#users-list_filter input").addClass('form-control');

        },
        language: { 
            search: "",
            searchPlaceholder: 'Search...' 
        }
    }        

    return config;
}

};