jQuery DataTables“表中沒有可用的數據”

Question

我有一個在$( 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中存在此問題。 這是我到目前為止所嘗試的：

- 我試過放置$( "#summary-table" ).DataTable(); 在我的AJAX電話之前。 那沒用。

- 我試圖替換$( body ).appendTo( $( "tbody" ) ); with $（“tbody”）。append（body）;`。 那沒用。

我用谷歌搜索 很多SO問題和其他有這個問題的網站都有一個與糟糕的表結構相關的解決方案，但我無法找到我的表結構出錯的地方。 查看inspect元素，它有我附加的行，以及DataTables生成的一堆HTML。 控制台中沒有錯誤。

如何讓DataTables使用我當前的數據？ 我忽略了什么潛在的錯誤？

Answer 1

在您的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!');
    }
});
});

希望，這會有所幫助！

Answer 2

通過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（）方法。

jQuery DataTables“表中沒有可用的數據”

問題描述

2 個解決方案

解決方案1
12 已采納 2015-09-29 19:52:38

解決方案2
5 2016-05-25 19:47:40

jQuery DataTables“表中沒有可用的數據”

問題描述

2 個解決方案

解決方案1 12 已采納 2015-09-29 19:52:38

解決方案2 5 2016-05-25 19:47:40

解決方案1
12 已采納 2015-09-29 19:52:38

解決方案2
5 2016-05-25 19:47:40