javascript - 表体替换后数据表初始化(ajax)

Question

我有一个数据表，它有一个搜索框(日期范围过滤器)，一旦我单击搜索按钮，表体就会根据过滤器(ajax)进行替换。

我的问题是我无法在ajax成功后初始化表。

HTML

<table data-page-length="20" id="occupancy" class="ui small celled table segment display" cellspacing="0"
       width="100%">
    <thead>
    <tr>
        <th>Date</th>
        <th>Arrivals</th>
        <th>Departures</th>
        <th>Occupied</th>
        <th>Available</th>
        <th>Occupancy</th>
    </tr>
    </thead>
    <tbody id="occupancyBody">

    </tbody>
</table>

Ajax

        type: 'POST',
        url: "../system/user/modules/" + MODULE_NAME + "/controller.php",
        data: "action=filterOc&" + url_data,
        success: function (resultData) {
            $('#occupancyBody').html(resultData);
            $('#occupancy').dataTable();
        }
    });

sample screenshot

Answer 1

您可以使用下面提到的代码在ajax调用后重新初始化表。

定义数据表时，可以将其存储在变量中。

var myTable =  $('#occupancy').DataTable({ // all your configuration });

现在，在 ajax 调用之后，您可以调用下面的行。

myTable.ajax.reload();

同时删除 ajax:success 函数中的这一行。

$('#occupancy').dataTable();

如果不起作用请告诉我。