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

$.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 function中删除此行。

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

如果不起作用，请告诉我。

Answer 2

嗨，我猜你选择了错误的身体ID：

$('#occupancyBody').html(resultData);

但在你的HTML中：

 <tbody id="dailyAct">

希望有所帮助，

Answer 3

请点击这里

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/js/jquery.dataTables.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/css/dataTables.bootstrap.css" rel="stylesheet"/>

<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>

＆＃13;

{{1}}

＆＃13;

Answer 4

ajax.reload() API函数仅在您在Datatable的初始化中包含ajax选项时才有效（请参阅here）。

在这种情况下，我建议将destroy:true添加到Datatables的初始化中，如下所示：

$('#occupancy').DataTable({ destroy:true})

这将允许您在每次ajax调用成功时重新创建表。

表体替换后的数据表初始化（ajax）

4 个答案: