Я использую плагин datatables jquery для одного из моих проектов. Для одного, в частности, количество столбцов может варьироваться в зависимости от того, сколько детей у потребителя (да, я понимаю, что нормализация и правильная техника будут вставляться в другую строку, но это требование клиента).jQuery Datatables вызывает ошибку при динамически создаваемых заголовках строк
DataTables должен быть установлен как таковой:
<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 выдает следующее сообщение об ошибке:
""DataTables warning (table id = 'datatable'): Cannot reinitialise DataTable. To retrieve the DataTables object for this table, please pass either no arguments to the dataTable() function, or set bRetrive to true. Alternativly, to destroy old table and create a new one...ETC."'
Да я поставил «bRetrieve»: правда, в JavaScript выше, и что не делает трюк. Если я удалю код выше, файл «работает» отлично, но он оставляет необходимые столбцы для моей таблицы.
Любые идеи?
Показано 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>
TOP кусок 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+.
показать нам ваш javascript ... и PHP сгенерированный ... – Incognito 2010-12-15 23:32:33
Я также использую dataTable и сделал то же самое, что вы пытаетесь сделать .... показать мне ваш код инициализации dataTable ... – Vivek 2010-12-16 06:42:49
@vivek - Извините за задержку, я был вне города. Я отправил код инициализации JS выше. – JM4 2010-12-20 16:25:07