时间戳

首页 > 解决方案 > 无法使用 Ajax 调用更新 DataTable 的正文

javascript - 无法使用 Ajax 调用更新 DataTable 的正文

问题描述

我有一个 DataTable，我试图通过和 ajax 调用加载数据，但第一行数据总是说：

“表中没有可用数据” 在此处输入图像描述

但是在它下面包含了加载的 ajax 数据。如何删除 No data 行并将 ajax 数据加载到该位置？

下面的代码：

<div class="box-body">
  <table id="changeTicketsTable" class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>Ticket Number</th>
        <th>Description</th>
        <th>Risk</th>
        <th>Primary CI</th>
        <th>State</th>
        <th>Planned Start Date</th>
        <th>Actual Start Date</th>
        <th>Actual End Date</th>
        <th>Affected Partners</th>
      </tr>
    </thead>
    <tbody>  

    </tbody>
    <tfoot>
      <tr>
        <th>Ticket Number</th>
        <th>Description</th>
        <th>Risk</th>
        <th>Primary CI</th>
        <th>State</th>
        <th>Planned Start Date</th>
        <th>Actual Start Date</th>
        <th>Actual End Date</th>
        <th>Affected Partners</th>
      </tr>
    </tfoot>
  </table>
</div>

数据表的实现：

<script>
    getChangeTicketInformation();
    $('#changeTicketsTable').DataTable({
      "pageLength": 5,
      'paging'      : true,
      'lengthChange': true,
      'searching'   : false,
      'ordering'    : true,
      'info'        : true,
      'autoWidth'   : false
    });
  })
</script>

用于进行 Ajax 调用的 Javascript：

function getChangeTicketInformation(){
  $.ajax({
     type: "GET",
     url: "../../get_change_ticket_info",
      success: function(data) {
        $.each(data, function (i, item) {
         $('#changeTicketsTable').find('tbody').append(
            '<tr>' +
            '<td>' + item.number + '</td>' +
            '<td>' + item.short_description + '</td>' +
            '<td>' + item.risk + '</td>' +
            '<td>' + item.cmdb_ci_display_value + '</td>' +
            '<td>' + item.state + '</td>' +
            '<td>' + item.start_date + '</td>' +
            '<td>' + item.work_start + '</td>' +
            '<td>' + item.work_end + '</td>' +
            '<td>' + 'FILL IN' + '</td>'
            + '</tr>');
        });
      }
    });
}

标签： javascriptjqueryajaxdatatables

解决方案

在 Chrome 中打开开发者工具，然后在您的页面中输入 JUST the jquery（也在下方），看看会发生什么。然后检查 html 并查看它是否按预期更新 - 它可能在那里，但可能被隐藏。

但更好的方法实际上是使用 DataTable 的内置 ajax 功能： https ://datatables.net/examples/ajax/simple.html

$('#changeTicketsTable').find('tbody').append(
            '<tr>' +
            '<td>' + item.number + '</td>' +
            '<td>' + item.short_description + '</td>' +
            '<td>' + item.risk + '</td>' +
            '<td>' + item.cmdb_ci_display_value + '</td>' +
            '<td>' + item.state + '</td>' +
            '<td>' + item.start_date + '</td>' +
            '<td>' + item.work_start + '</td>' +
            '<td>' + item.work_end + '</td>' +
            '<td>' + 'FILL IN' + '</td>'
            + '</tr>');
        });

推荐阅读