3

テーブルを作成する別の.phpファイルからdataTableを初期化しようとしています。テーブルは正常に作成されますが、dataTableのプロパティは有効ではないようです。

これが私のコードです：

index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <script type="text/javascript" language="javascript" src="jquery.js"></script>
        <script type="text/javascript" language="javascript" src="jquery.dataTables.js"></script>
        <script type="text/javascript" charset="utf-8">
            $(document).ready(function() {
                $('#live_table').load("table.php");
                var refreshId = setInterval(function() {
                    $('#live_table').load("table.php");
                }, 2000);
                $.ajaxSetup({ cache: false });
                $('#data').dataTable();
            });
        </script>
        <title></title>
    </head>
    <body>
        <div id="live_table">
        </div>
    </body>
</html>

table.php

<table id="data">
    <thead>
        <tr>
            <th>Foo</th>
            <th>Bar</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </tbody>
</table>

index.phpは2000ミリ秒ごとにテーブルを更新することを目的としており、table.phpは実際には私の実際の状況ではより複雑であり、条件付きセルの背景とリンクが必要です。そのため、テーブルデータにサーバー側処理（JSON）を使用することを選択しませんでした。 。

$('#data').dataTable();コマンドが機能しない理由はありますか？

4

3 に答える 3

2

.dataTable()問題は、テーブルが実際にロードされる前にへの呼び出しが発生していることであるように見えます。これは、.load呼び出しが非同期で発生し、残りのコードが実行され続けるためです。.dataTable()リクエストが終了したら、次の3番目のパラメータを使用して呼び出す必要があり.loadます。

$('#live_table').load(
    "table.php",
    {},
    function() { $('#data').dataTable(); }
);

デモ： http： //jsfiddle.net/sAnUL/1/

于 2012-07-13T16:50:33.547 に答える
2

まだ存在しないセレクターを使用しているため、ロードされていないと思います。

試す：

$(document).ready(function() {
            $('#live_table').load("table.php");
            var refreshId = setInterval(function() {
                $('#live_table').load("table.php");
            }, 2000);
            $.ajaxSetup({ cache: false });
            $('#data').dataTable(); //This line should be in table.php

技術的には、DOMには要素#dataはありません。テーブルの初期化はtable.phpファイルに入れる必要があります。

于 2012-07-13T16:50:44.037 に答える
2

load()メソッドのコールバック関数を使用できます。

$('#live_table').load("table.php", function(){
    $('#data').dataTable();
});

または使用ajaxSuccess()：

Ajaxリクエストが正常に完了するたびに実行される関数をアタッチします。これはAjaxイベントです。

$('#data').ajaxSuccess(function(){
    $(this).dataTable()
})
于 2012-07-13T16:52:49.243 に答える