jQuery DataTables“表中无可用数据" [英] jQuery DataTables "No Data Available in Table"

查看：31
本文介绍了jQuery DataTables“表中无可用数据"的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个在 $( document ).ready 函数中制作的表格.我也在使用 jQuery DataTables 插件.出于某种原因，当页面加载时，表格也会加载，但第一行显示表格中没有可用数据".

HTML

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

<div class="col-sm-12" id="ovs-sum"><table class="table table-striped" id="summary-table"><头><tr><第>顺序</th><th>计划员</th><th>供应商</th><th>SKU</th><第>描述<th>数量</th>《第 PO 日期》<th>PO跟踪</th></tr></thead></tbody>

JS/jQuery (scripts.js)

$ ( 文档 ).ready(function() {$.ajax({类型:'获取'，网址:'模型/摘要.php'，mimeType: 'json',成功:功能(数据){$.each(data, function(i, data) {var body = "";正文 += ""+ data.name + "</td>";正文 += ""+ data.address + "</td>";正文 += ""+ data.phone_no + "</td>";正文 += ""+ data.birthday + "</td>";正文 += ""+ data.color + "</td>";正文 += ""+ data.car + "</td>";正文 += ""+ data.hobbies + "</td>";正文 += ""+ data.relatives + "</td>";正文 += "</tr>";$( body ).appendTo( $( "tbody" ) );});},错误:函数(){alert('失败！');}});/*数据表实例化.*/$( "#summary-table" ).DataTable();}

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

此问题存在于 IE、Chrome 和 FireFox.这是我迄今为止尝试过的:

-我试过在我的 AJAX 调用之前放置 $( "#summary-table" ).DataTable(); .那没有用.

-我尝试将 $( body ).appendTo( $( "tbody" ) ); 替换为 $( "tbody" ).append( body );`.那没有用.

-我用谷歌搜索.许多有此问题的 SO 问题和其他站点都有与错误表结构相关的解决方案，但我找不到我的表结构哪里出错了.查看inspect元素，它有我附加的行，以及DataTables生成的一堆HTML.控制台中没有错误.

如何让 DataTables 处理我当前的数据?我忽略了哪些潜在错误?

解决方案

请在将 AJAX 加载的表附加到正文后尝试启动 dataTable.

$ ( 文档 ).ready(function() {$.ajax({类型:'获取'，网址:'模型/摘要.php'，mimeType: 'json',成功:功能(数据){$.each(data, function(i, data) {var body = "";正文 += ""+ data.name + "</td>";正文 += ""+ data.address + "</td>";正文 += ""+ data.phone_no + "</td>";正文 += ""+ data.birthday + "</td>";正文 += ""+ data.color + "</td>";正文 += ""+ data.car + "</td>";正文 += ""+ data.hobbies + "</td>";正文 += ""+ data.relatives + "</td>";正文 += "</tr>";$( "#summary-table tbody" ).append(body);});/*数据表实例化.*/$( "#summary-table" ).DataTable();},错误:函数(){alert('失败！');}});});

希望，这会有所帮助！

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

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:

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

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

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

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

解决方案

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

$ ( 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!

这篇关于jQuery DataTables“表中无可用数据"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆