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

ha5z0ras 于 2023-04-20 发布在 jQuery

关注(0)|答案(2)|浏览(204)

我有一个在$( document ).ready函数中创建的表。我还使用了jQuery DataTables插件。由于某种原因，当页面加载时，表加载，但第一行显示“No Data Available in Table”。

超文本标记语言

<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();。这不起作用。
我尝试将$( body ).appendTo( $( "tbody" ) );替换为$（“tbody”）.append（body）;”“那没有用。
我谷歌了一下。很多SO问题和其他有这个问题的网站都有一个与坏表结构相关的解决方案，但我找不到我的表结构出错的地方。查看inspect元素，它有我追加的行，加上DataTables生成的一堆HTML。控制台中没有错误。
如何让DataTables处理我当前的数据？我忽略了哪些潜在错误？

jquery

来源：https://stackoverflow.com/questions/32852388/jquery-datatables-no-data-available-in-table

2条答案

按热度按时间

qv7cva1a1#

请尝试在您的 AJAX 加载的表被追加到body之后初始化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!');
    }
});
});

希望这会有帮助！

赞(0）回复(0）举报 2023-04-20

7z5jn7bk2#

当通过 AJAX 将数据加载到DataTable时，只需使用DataTablerow.add（）API，如here文档所示。
在你 AJAX 响应中（假设你启动了一个名为myTable的DataTable）：

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

myTable.draw();

我发现这个方法更简单，因为我不需要构建html --我只需要将一个数据数组传递给DataTable对象上的row.add（）方法。

赞(0）回复(0）举报 2023-04-20

我来回答

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

2条答案

相关问题

热门标签

最新问答