0

テーブルにデータを入力しcontent.phpないと、適切にフォーマットされた jquery データ テーブルが表示されます。ただし、データを入力すると（DBデータと乱数の手動入力の両方を試しました）、フォーマットされなくなり、地獄のように見えます。この例で$.get(..)(used in test.php) が正しく機能しないということはありえますか?

test.php

    $(document).ready(function() {
        loadContent();
    });

    function loadContent() {
                            $.get('modules/mod_scheduler/content.php', function(data) {
                                $('#table').html(data);
                            });     
    }

<div id="table"></div>

content.php

<?php
    include_once '../../include/connect_db.php';

    $query = "SELECT * FROM `TestTable`";
    $result=execute_query($query);

?>



    <table id="newspaper-b" border="0" cellspacing="2" cellpadding="2" width = "100%">
                        <thead>
                            <tr>
                                <th scope="col">Flight Num</th>
                                <th scope="col">Appearance Time</th>
                                <th scope="col">Target Time</th>
                                <th scope="col"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php while($row=mysql_fetch_assoc($result)) {
                                        $flightNum=$row['flightNum'];
                                        $appearanceTime=$row['appearanceTime'];
                                        $targetTime=$row['targetTime'];
                            ?>
                            <tr>
                                <td><?php echo $flightNum; ?></td>
                                <td>

                                        <?php echo $appearanceTime;?>

                                </td>
                                <td>

                                        <?php echo $targetTime;?>

                                </td>

                                <td id="<?php echo $flightNum; ?>">
                                    <div>
                                        <img src='modules/images/edit.png' alt='Edit' />
                                    </div>
                                </td>
                            </tr>
                            <?php }?>
                        </tbody>
    </table>

もちろん、以下も定義しています。

<link type="text/css" rel="stylesheet" href="modules/mod_scheduler/css/demo_table.css"/>
<link type="text/css" rel="stylesheet" href="modules/mod_scheduler/css/demo_page.css"/>
<link type="text/css" rel="stylesheet" href="modules/mod_scheduler/css/demo_table_jui.css"/>

<script type="text/javascript" src="modules/mod_scheduler/js/dataTable/jquery-ui.js"></script>
<script type="text/javascript" src="modules/mod_scheduler/js/dataTable/jquery.dataTables.js"></script>

<script language="javascript" type="text/javascript" src="modules/mod_scheduler/js/jqplot/plugins/jqplot.pointLabels.js"></script>
4

2 に答える 2

1

ajax の更新時にスタイルシートをリロードできますが、新しい要素に CSS スタイルを自動的に適用する必要があります。

$(document).ready(function() {
    loadContent();
});

function loadContent() {
    $.get('modules/mod_scheduler/content.php', function(data) {
        $('#table').html(data);
        var randomString = '?r=' + Math.random();
        $('link[rel="stylesheet"]').each(function () {
            this.href = this.href.replace(/\?.*|$/, randomString);
        }); 
    });
}

それでもうまくいかない場合は、AJAX から生成されたコンテンツをそのtablediv に手動で適用してみてください。CSS にエラーがある可能性があります..いくつか//はコメントとして..私はそのような間違いを犯します..

于 2012-09-04T17:03:08.053 に答える
1

あなたはテーブルを返していますがdataTable()、私が見ることができるテーブルを呼び出していません. DataTables プラグインの動作方法として、通常はdataTable()テーブルで を呼び出します。「任意の」スタイル シート (テーブルに設定したスタイルに関係なく) がどうなるか思い出せませんが、確かに jQuery UI を使用している場合 (実際のように見えます)、正しく表示されません。関数を呼び出すまで、jQuery UI テーマに必要なすべてのクラスが追加されます。これらのクラスを既にテーブルに返すことはできますが、現在はそうではありません。

これはサーバー側で行っているので、さらに一歩進んで、一連のテーブル マークアップではなく、テーブルの JSON 形式のデータを返します。これは、DataTable を使用するよりエレガントで管理しやすい方法です。

于 2012-09-04T21:14:41.553 に答える