5

プロジェクトの1つにDatatablesjqueryプラグインを使用しています。特に、列の数は、コンシューマーの子の数によって異なります（はい、正規化と適切な手法で別の行に挿入されますが、これはクライアントの要件です）。

データテーブルは次のように設定する必要があります。

<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警告（テーブル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つ以上のフィールドのヘッダーレコードがない場合でも）。

4

4 に答える 4

1

DataTables は、同じテーブルを 2 回作成することを好みません。これは明らかに何が起こっているかです (コードからはわかりませんが)。これが発生すると、言及したエラーがスローされます。

(DataTables が期待するセルの数、またはヘッダーと列の関係に問題がある場合、別のエラー メッセージが生成されます)。

既に DataTable オブジェクトであるオブジェクトを使用していないことを確認するには、初期化の前にこれを配置してみてください。

if (oTable) {
  oTable.fnDestroy();
  oTable = undefined;
  }
于 2011-01-03T20:53:51.483 に答える
0

テーブルの本体に対して生成された出力を表示していません。テーブルの先頭にあるのと同じ数の列をテーブルの本体に生成していると確信していますか？

于 2011-01-03T19:12:31.307 に答える
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 />";
}

?>

于 2010-12-27T23:22:43.820 に答える
0

私の最後のコメントに続いて、「ソート可能」の ID を持つテーブルが 1 つしかないことを確認してください。

ID が重複している場合、DataTables はテーブルを 2 回作成しようとするため、言及したエラーが発生します。

于 2011-01-04T17:21:56.600 に答える