动态创建行标题时,jQuery Datatables会引发错误

Question

动态创建行标题时,jQuery Datatables会引发错误

我正在为我的一个项目使用Datatables jquery插件.特别是对于一个,列数可以根据消费者拥有多少个孩子而变化(是的,我意识到规范化和正确的技术会插入另一行,但这是客户要求).

数据表必须如此设置:

<table>
  <thead>
     <tr>
       <th></th>
     </tr>
  </thead>
  <tbody>
     <tr>
      <td></td>
     </tr>
  </tbody>
</table>

Run Code Online (Sandbox Code Playgroud)

我的脚本开头为:

<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>

Run Code Online (Sandbox Code Playgroud)

以这种方式,最终的列标题可以是1或50个点长.但是,使用此动态代码,datatables会引发以下错误:

""DataTables警告(table id ='datatable'):无法重新初始化DataTable.要检索此表的DataTables对象,请将无参数传递给dataTable()函数,或将bRetrive设置为true.另外,要破坏旧桌子并创建一个新桌子...... ETC."'

是的我已经设置了"bRetrieve":在上面的javascript中为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>

Run Code Online (Sandbox Code Playgroud)

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> ...

Run Code Online (Sandbox Code Playgroud)

关于评论/答案的更新

我收到了一些回复,表明标题的数量可能与正文中的字段数不匹配.正如我在下面提到的,完全消除下面的PHP脚本将消除标题中的5个以上字段,毫无疑问地将计数匹配失去平衡.然而,这并不会导致错误,并且实际上"解决"数据表中的问题正常运行(即使正文中有5个以上的字段没有头记录.

Answer 1

Col*_*lum 0

我不知道这个插件，所以如果这个答案完全是废话，请不要怪我。

据我所知，您的表代码无效。我没有使用这个插件的经验，但从我所看到的是，你只是把所有东西都放在了标题中。这与您所说的代码不匹配。尝试这个：

<table cellpadding="0" cellspacing="0" border="0" class="display" id="sortable">
<thead>
    <tr>
        <th>parent name</th>
        <th>parent phone</th>
    </tr>
</thead>
<tbody>
<?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 "
                <tr>
                <td>Child Name ".$i."</td>
             <td>Date of Birth ".$i."</td>
            </tr>";
    }

    $db->commit();      
}

catch (PDOException $e)
{
    echo "<p align='center'>There was a system error. Please contact administration.<br>".$e->getMessage()."</p><br />";
}

Run Code Online (Sandbox Code Playgroud)

?>

归档时间：	15 年，2 月前
查看次数：	6464 次
最近记录：	12 年前