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

I have a table that is made in the $( document ).ready function. I am also using the jQuery DataTables plugin. For some reason, when the page loads, the table loads but the first row says "No Data Available in Table".

我有一个在$(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();
}

Also, if I click on the sort arrows on the column headers, all of my data disappears and I'm just left with my column headers and "No data available in table.".

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

This problem exists in IE, Chrome, and FireFox. Here is what I've tried so far:

IE,Chrome和FireFox中存在此问题。这是我到目前为止所尝试的:

-I've tried Placing the $( "#summary-table" ).DataTable(); before my AJAX call. That did not work.

- 我试过放置$(“#summary-table”)。DataTable();在我的AJAX电话之前。那没用。

-I tried to replace $( body ).appendTo( $( "tbody" ) ); with $( "tbody" ).append( body );`. That did not work.

- 我试图替换$(body).appendTo($(“tbody”)); with $(“tbody”)。append(body);`。那没用。

-I googled. A lot of SO questions and other sites that have this issue have a solution related to bad table structure, but I cannot find where my table structure is going wrong. Looking in inspect element, it has my appended rows, plus a bunch of HTML that DataTables produces. No errors in the console.

我用谷歌搜索很多SO问题和其他有这个问题的网站都有一个与糟糕的表结构相关的解决方案,但我无法找到我的表结构出错的地方。查看inspect元素,它有我附加的行,以及DataTables生成的一堆HTML。控制台中没有错误。

How can I get DataTables to work with my current data? What are any potential errors that I am overlooking?

如何让DataTables使用我当前的数据?我忽略了什么潜在的错误?

2 个解决方案

#1

Please try to initiate the dataTable after your AJAX loaded table is appended on body.

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

Hope, this would help!

希望,这会有所帮助!

#2

When loading data via AJAX to a DataTable, just use the DataTable row.add() API as documented here.

通过AJAX将数据加载到DataTable时,只需使用此处记录的DataTable row.add()API。

In your AJAX response (assuming you initiated a DataTable called myTable):

在您的AJAX响应中(假设您启动了一个名为myTable的DataTable):

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

myTable.draw();

I find this method easier because I don't have to build the html - I can just pass an array of data to the row.add() method on my DataTable object.

我觉得这个方法比较容易,因为我不需要构建html - 我可以将数据数组传递给我的DataTable对象上的row.add()方法。

#1