jQuery DataTables“表格中没有可用数据”

Question

jQuery DataTables“表格中没有可用数据”

9

我有一个在$( document ).ready函数中创建的表格。我还使用了jQuery DataTables插件。但是出现了一个问题，当页面加载时，表格会加载，但第一行会显示“表格中没有可用数据”。

HTML

<head>
<link rel="stylesheet" type="text/css" href="/path/to/css/jquery.dataTables.css"> 
<script type="text/javascript" charset="utf8" src="/path/to/js/jquery.dataTables.js"></script>

</head>

<div class="col-sm-12" id="ovs-sum">
<table class="table table-striped" id="summary-table">
    <thead>
        <tr>
            <th>Order</th>
            <th>Planner</th>
            <th>Vendor</th>
            <th>SKU</th>
            <th>Description</th>
            <th>Quantity</th>
            <th>PO Date</th>
            <th>PO Tracking</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
</div>

JS/jQuery (scripts.js)

$ ( document ).ready(function() {
    $.ajax({
        type: 'GET',
        url: 'models/summary.php',
        mimeType: 'json',
        success: function(data) {
            $.each(data, function(i, data) {
                var body = "<tr>";
                body    += "<td>" + data.name + "</td>";
                body    += "<td>" + data.address + "</td>";
                body    += "<td>" + data.phone_no + "</td>";
                body    += "<td>" + data.birthday + "</td>";
                body    += "<td>" + data.color + "</td>";
                body    += "<td>" + data.car + "</td>";
                body    += "<td>" + data.hobbies + "</td>";
                body    += "<td>" + data.relatives + "</td>";
                body    += "</tr>";
                $( body ).appendTo( $( "tbody" ) );
            });
        },
        error: function() {
            alert('Fail!');
        }
    });

    /*DataTables instantiation.*/
    $( "#summary-table" ).DataTable();
}

此外，如果我点击列标题上的排序箭头，所有的数据都会消失，只剩下列标题和“表中没有可用的数据”。

这个问题存在于IE、Chrome和FireFox中。这是我到目前为止尝试过的：

-在我的AJAX调用之前，我尝试了将$( "#summary-table" ).DataTable();放置在前面。但这没起作用。

-我试图用$( "tbody" ).append( body );代替$( body ).appendTo( $( "tbody" ) );。但这也没起作用。

-我在谷歌上搜索了很多相关问题的SO问答和其他网站，但它们提供的解决方案都与表格结构有关，但我找不到我的表格结构出了什么问题。在查看元素时，它显示了我添加的行，以及DataTables生成的一大堆HTML代码。控制台没有任何错误。

如何让DataTables与我的当前数据配合使用？我是否忽略了任何潜在的错误？

- aCarella

2个回答

8

当通过 AJAX 向 DataTable 加载数据时，只需按照此处所述使用 DataTable row.add() API。

在您的 AJAX 响应中（假设您启动了一个名为 myTable 的 DataTable）：

$.each(data, function(i, data) {
    myTable.row.add([data.name, data.address,...]);
});

myTable.draw();

我认为这个方法更简单，因为我不需要构建 html - 我只需向 DataTable 对象的 row.add() 方法传递一个数据数组即可。

- holly_whitney

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Abhijeet K. · Accepted Answer

请在将 AJAX 加载的表格添加到页面后再初始化 dataTable。

$ ( document ).ready(function() {
$.ajax({
    type: 'GET',
    url: 'models/summary.php',
    mimeType: 'json',
    success: function(data) {
        $.each(data, function(i, data) {
            var body = "<tr>";
            body    += "<td>" + data.name + "</td>";
            body    += "<td>" + data.address + "</td>";
            body    += "<td>" + data.phone_no + "</td>";
            body    += "<td>" + data.birthday + "</td>";
            body    += "<td>" + data.color + "</td>";
            body    += "<td>" + data.car + "</td>";
            body    += "<td>" + data.hobbies + "</td>";
            body    += "<td>" + data.relatives + "</td>";
            body    += "</tr>";
            $( "#summary-table tbody" ).append(body);
        });
        /*DataTables instantiation.*/
        $( "#summary-table" ).DataTable();
    },
    error: function() {
        alert('Fail!');
    }
});
});

希望这能有所帮助！