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

【问题标题】：Data table initialize after table body replace (ajax)表体替换后数据表初始化（ajax）
【发布时间】：2017-06-13 11:37:40
【问题描述】：

我有一个数据表，它有一个搜索框（日期范围过滤器），一旦我点击搜索按钮，表体就会根据过滤器（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

【问题讨论】：

标签： javascript php jquery ajax datatable

【解决方案1】：

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

在定义数据表时，您可以存储在一个变量中。

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

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

myTable.ajax.reload();

也在 ajax:success 函数中删除这一行。

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

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

【讨论】：

我的代码是这样的 var dt= $('#occupancy').dataTable(); $('#occupancyBody').html(resultData); dt.ajax.reload();
您能否检查我的新答案并进行相应的更改
这个 Datatable 实例没有 ajax 源数据（即：没有 ajax 选项），这就是 ajax.reload() 抛出错误的原因

【解决方案2】：

请看这里

$(document).ready(function(){
  var table = $('#occupancy').dataTable();
  $.ajax({
      type: 'POST',
      url: "../system/user/modules/controller.php",
      data: "action=filterOc&",
      success: function (resultData) {
         $('#occupancyBody').html(resultData);
         table.ajax.reload();
      }
  });
});

<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>

【讨论】：

它工作完美，但我的问题是默认添加了一些过滤器。请检查屏幕截图。 “未找到匹配记录”

【解决方案3】：

只有在 Datatable 的初始化中包含 ajax 选项时，ajax.reload() API 函数才能工作（请参阅 here）。

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

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

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

【讨论】：

【解决方案4】：

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

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

但在您的 html 中：

 <tbody id="dailyAct">

希望对你有帮助，

【讨论】：

这是一个打字错误。请再检查一遍