我正在为我的一个项目使用 Datatables jquery 插件。特别是，列的数量可以根据消费者有多少孩子而有所不同（是的，我意识到规范化和适当的技术会插入另一行，但这是客户的要求）。
数据表必须这样设置：
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
我的脚本开始为：
<table cellpadding="0" cellspacing="0" border="0" class="display" id="sortable">
<thead>
<tr>
<th>parent name</th>
<th>parent phone</th>
<?php
try {
$db->beginTransaction();
$stmt = $db->prepare("SELECT max(num_deps) FROM (SELECT count(a.id) as num_deps FROM children a INNER JOIN parents b USING(id) WHERE a.id !=0 GROUP BY a.id) x");
$stmt->execute();
$rows = $stmt->fetchAll();
for($i=1; $i<=$rows[0][0]; $i++) {
echo "
<th>Child Name ".$i."</th>
<th>Date of Birth ".$i."</th>
";
}
$db->commit();
}
catch (PDOException $e)
{
echo "<p align='center'>There was a system error. Please contact administration.<br>".$e->getMessage()."</p><br />";
}
?>
</tr>
</thead>
以这种方式，最终的列标题可以是 1 或 50 个点长。但是，使用此动态代码，数据表会引发以下错误：
""DataTables 警告 (table id = 'datatable'): 无法重新初始化 DataTable。要检索此表的 DataTables 对象，请不向 dataTable() 函数传递任何参数，或者将 bRetrive 设置为 true。或者，销毁旧表并创建一个新表……ETC。”
是的，我在上面的 javascript 中设置了 "bRetrieve" : true ，但这并不能解决问题。如果我删除上面的代码，文件“工作正常”，但它会为我的表留下必要的列。
有任何想法吗？
显示 JS
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<script type="text/javascript" src="../media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../media/js/TableTools/TableTools.js"></script>
<script type="text/javascript" src="../media/ZeroClipboard/ZeroClipboard.js"></script>
<script type="text/javascript">
$(document).ready(function() {
TableToolsInit.sSwfPath = "../media/swf/ZeroClipboard.swf";
oTable = $('#sortable').dataTable({
"bRetrieve": true,
"bProcessing": true,
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": 'T<"clear"><"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>'
});
});
</script>
</head>
顶部的 HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="default.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<style type="text/css" title="currentStyle">
@import "TableTools.css";
@import "demo_table_jui.css";
@import "jquery-ui-1.8.4.custom.css";
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/TableTools/TableTools.js"></script>
<script type="text/javascript" src="ZeroClipboard/ZeroClipboard.js"></script>
<script type="text/javascript">
$(document).ready(function() {
TableToolsInit.sSwfPath = "ZeroClipboard.swf";
oTable = $('#sortable').dataTable({
"bRetrieve": true,
"bProcessing": true,
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": 'T<"clear"><"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>'
});
});
</script>
</head>
<body bgcolor="#e0e0e0">
<div class="main">
<div class="body">
<div class="body_resize">
<div class="liquid-round">
<div class="top"><span><h2>Details</h2></span></div>
<div class="center-content">
<div style="overflow-x:hidden; min-height:400px; max-height:600px; overflow-y:auto;">
<div class="demo_jui"><br />
<table cellpadding="0" cellspacing="0" border="0" class="display" width="100%" id="sortable">
<thead>
<tr>
<th>First Name</th>
<th>MI</th>
<th>Last Name</th>
<th>Street Address</th>
<th>City</th>
<th>State</th>
<th>Zip</th>
<th>DOB</th>
<th>Gender</th>
<th>Spouse Name</th>
<th>Spouse Date of Birth</th>
<!-- this part is generated with the php, when removed, datatables works just fine with the rest of the page -->
<th>Dependent Child Name 1</th>
<th>Dependent Date of Birth 1</th>
<th>Dependent Child Name 2</th>
<th>Dependent Date of Birth 2</th>
<th>Dependent Child Name 3</th>
<th>Dependent Date of Birth 3</th>
<th>Dependent Child Name 4</th>
<th>Dependent Date of Birth 4</th>
<th>Dependent Child Name 5</th>
<th>Dependent Date of Birth 5</th>
<th>Dependent Child Name 6</th>
<th>Dependent Date of Birth 6</th>
<th>Dependent Child Name 7</th>
<th>Dependent Date of Birth 7</th>
</tr>
</thead>
<tbody>
<tr> ...
关于评论/答案的更新
我收到了一些回复，表明标头的数量可能与正文中的字段数不匹配。正如我在下面提到的，完全消除下面的 php 脚本将消除标题中的 5+ 字段，并且毫无疑问会使计数匹配失去平衡。但是，这不会导致错误，实际上“解决”了数据表正常运行的问题（即使正文中没有 5+ 字段的标题记录。