0

如果content.php我没有用数据填充表，那么我可以看到格式正确的 jquery 数据表。但是，如果我用数据填充它（我尝试了数据库数据和一些随机数的手动输入），它不再被格式化并且看起来像地狱。$.get(..)在这个例子中， （用于）是否会发生test.php无法正常工作的情况？

测试.php

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

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

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

内容.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);
        }); 
    });
}

如果它仍然不起作用，请尝试在该tablediv 中手动应用从 AJAX 生成的内容，也许你的 css 中有错误 .. 一些//作为评论 .. 我犯了这样的错误 ..

于 2012-09-04T17:03:08.053 回答
1

您正在返回一张桌子，但您没有dataTable()在我看到的情况下调用它。DataTables 插件的工作方式通常是dataTable()在表上调用。我不记得“任意”样式表会发生什么（无论您为表格设置了什么样式），但如果您使用的是 jQuery UI（看起来像您），它肯定看起来不对直到您调用该函数，从而为 jQuery UI 主题添加所有必要的类。您可以返回表中已经存在的那些类，但目前还没有。

由于您是在服务器端执行此操作，因此我会更进一步，为表返回 JSON 格式的数据，而不是一大堆表标记。这是使用 DataTables 的更优雅和更易于管理的方式。

于 2012-09-04T21:14:41.553 回答