如果HTML是通过$.get(.)发送的,则jquery数据表的格式不正确


If HTML is sent through $.get(..), jquery data table is not properly formatted

如果在content.php中我没有用数据填充表,那么我可以看到格式正确的jquery数据表。然而,如果我用数据填充它(我尝试了DB数据和手动输入一些随机数),它就不再格式化了,看起来就像地狱一样。在本例中,$.get(..)(用于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>

您正在返回一个表,但您没有对它调用dataTable(),我可以看到。DataTables插件的工作方式通常是在表上调用dataTable()。我记不起"任意"样式表(无论你为表设置了什么样式)会发生什么,但如果你使用的是jQuery UI(看起来像你),那么在你调用函数之前,它看起来不会正确,从而为jQuery UI主题添加了所有必要的类。您可以返回那些已经在表中的类,但目前还没有。

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

您可以在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中有错误。。一些//作为评论。。我犯那样的错误。。