logo标签列表

使用Ajax调用无法更新DataTable的主体

javascriptjqueryajaxdatatables
5

我有一个 DataTable，我正在尝试通过 ajax 调用来加载数据，但是第一行数据总是会显示：

"表中没有可用的数据" enter image description here

但在此行下面，已包含加载的 ajax 数据。如何删除“无数据”行并将 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>

DataTable的实现：

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

Javascript用于进行Ajax调用：

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>');
        });
      }
    });
}
3个回答
1
在Chrome中打开开发者工具，将下面的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>');
        });
如果有基于原生DataTables ajax选项的解决方案被发布，我会给这个答案点赞。相反，我担心OP已经接受了这个答案，因为它所做的是将<tbody> HTML代码烹制出来，这完全是错误的-DataTables可以自己完成这个工作，此外，使用这种方法不会影响表格数据，因此，您不能使用DataTables API的大多数方法。所以，我只能选择踩它。 - Yevhen Horbunkov
0

我可以给你一个简单的例子。从你的Ajax URL获取数组响应，并将它们设置如下：

创建 <tbody id='table_tbody_id'></tbody> 并

试试这个

function getChangeTicketInformation() {
$.ajax({
    type: "GET",
    url: "../../get_change_ticket_info",
    success: function (data) {

        for (let i in data) {
            let item = data[i];
            let number = item[0];
            let short_description = item[1];
            let risk = item[2];
            let cmdb_ci_display_value = item[3];
            let state = item[4];
            let start_date = item[5];
            let work_start = item[6];
            let work_end = item[7];

            let tableRow = "<tr>\n" +
                "                        <td> " + number + "</td>\n" +
                "                        <td> " + short_description + "</td>\n" +
                "                        <td> " + risk + "</td>\n" +
                "                        <td> " + cmdb_ci_display_value + "</td>\n" +
                "                        <td> " + state + "</td>\n" +
                "                        <td> " + start_date + "</td>\n" +
                "                        <td> " + work_start + "</td>\n" +
                "                        <td> " + work_end + "</td>\n" +
                "                        <td> " + 'FILL IN' + "</td>\n" +
                "                    </tr>";

            $('#table_tbody_id').append(tableRow);
        }

    }
});
}

并调用方法

getChangeTicketInformation();
我已经对这个答案进行了投票，因为有两个原因。首先，你不应该建议调用jQuery的$.ajax()方法来填充DataTable，而是应该使用内置的ajax选项，它会在必要时触发AJAX调用。其次，手动完成DataTables的工作并编写<tbody>html是没有意义的，更不用说它不影响底层表数据源，并使大多数DataTables API无用。 - Yevhen Horbunkov
0
使用 DataTable，您可以使用以下 API 添加新行：

row.add()：向表中添加新行。

function getChangeTicketInformation() {
        var data = [{number: 1, short_description: '1', risk: 1, cmdb_ci_display_value: 1, state: '1', start_date: '1', work_start: '1', work_end: '1'},
            {number: 2, short_description: '2', risk: 2, cmdb_ci_display_value: 2, state: '2', start_date: '2', work_start: '2', work_end: '2'},
            {number: 3, short_description: '3', risk: 3, cmdb_ci_display_value: 3, state: '3', start_date: '3', work_start: '3', work_end: '3'}];
        //$.ajax({
            //type: "GET",
            //url: "../../get_change_ticket_info",
            //success: function (data) {
                var dti = $('#changeTicketsTable').DataTable();
                $.each(data, function (i, item) {
                    dti.row.add([
                        item.number,
                        item.short_description,
                        item.risk,
                        item.cmdb_ci_display_value,
                        item.state,
                        item.start_date,
                        item.work_start,
                        item.work_end,
                        'FILL IN'
                    ]).draw(false);
                });
            //}
            //});
    }

$('#changeTicketsTable').DataTable({
    "pageLength": 5,
    'paging': true,
    'lengthChange': true,
    'searching': false,
    'ordering': true,
    'info': true,
    'autoWidth': false
})
getChangeTicketInformation();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>


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

有更好的解决方案 - 使用 DataTables 嵌入式 ajax 选项来获取数据。 - Yevhen Horbunkov
你是对的。还有一个可以考虑的jQuery插件。我添加这个答案只是为了证明datatable是一个具有自己方法的插件... - gaetanoM
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接