首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >无法使用Ajax调用更新DataTable的正文

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

Stack Overflow用户
提问于 2019-06-04 01:13:11
回答 1查看 611关注 0票数 5

我有一个DataTable,我试图通过它和ajax调用加载数据,但第一行数据总是这样写的:

“表中没有可用的数据”

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

代码如下:

代码语言:javascript
复制
<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>

DataTable的实现:

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

用于进行Ajax调用的Javascript:

代码语言: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>');
        });
      }
    });
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-06-04 01:19:23

在Chrome中打开开发人员工具,在页面中输入jquery (也在下面),看看会发生什么。然后检查html并查看是否按预期进行了更新-它可能在那里,但可能被隐藏。

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

代码语言:javascript
复制
$('#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>');
        });
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56431796

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档