如果在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);
});
});
}
如果仍然不起作用,请尝试在table
div中手动应用AJAX生成的内容,也许您的css中有错误。。一些//
作为评论。。我犯那样的错误。。