BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] jQuery DataTables "No Data Available in Table" （テーブルにデータがありません

2022-02-27 03:44:37

質問

で作った表があるのですが $( 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();
}

また、カラムヘッダーのソート矢印をクリックすると、データがすべて消えてしまい、カラムヘッダーと"No data available in table."が残るだけになってしまいます。

この問題は、IE、Chrome、FireFoxで発生します。以下は、これまでに私が試したことです。

-私は $( "#summary-table" ).DataTable(); をAJAX呼び出しの前に実行します。それはうまくいきませんでした。

-を置き換えることを試みました。 $( body ).appendTo( $( "tbody" ) ); を$( "tbody" ).append( body );` に変更しました。これはうまくいきませんでした。

-ググってみました。SOの質問とこの問題がある他のサイトの多くは、悪いテーブル構造に関連する解決策を持っていますが、私は私のテーブル構造がどこに間違っているのか見つけることができません。inspect要素で見ると、それは私の追加された行と、DataTablesが生成するHTMLの束を持っています。コンソールにエラーはありません。

どうすれば、現在のデータでDataTablesを動作させることができるのでしょうか？私が見落としている潜在的なエラーは何ですか？

どのように解決するのですか？

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

希望、これは助かる!

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します