jQuery Datatables throws error when dynamically created row headers

Question

I am using the Datatables jquery plugin for one of my projects. For one in particular, the number of columns can vary based on how many children a consumer has (yes I realize normalization and proper technique would insert on another row but it is a client requirement).

Datatables must be set up as such:

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

my script starts out as:

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

In this manner, the final column headers can be 1 or 50 spots long. However, with this dynamic code in place, datatables throws the following error:

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

Yes I have set "bRetrieve" : true in the javascript above and that does not do the trick. If I remove the code above, the file "works" fine but it leaves off the necessary columns for my table.

Any ideas?

Displaying 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 piece of 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> ...

UPDATE REGARDING COMMENTS/ANSWERS

I have received a number of responses indicating the number of headers may not match the field count in the body. As I mention below, eliminating the php script below altogether would eliminate 5+ fields in the header and without question throw the count match off balance. This DOES NOT however cause an error and in fact "resolves" the issue in that datatables functions properly (even though there is NO header record for 5+ fields in the body.

i am also using dataTable and did exactly the same what you are trying to do....show me your dataTable initialization code... — Vivek
– Vivek, Commented Dec 16, 2010 at 6:42
@vivek - sorry for the delay, i was out of town. I posted my JS initialization code above. — JM4
– JM4, Commented Dec 20, 2010 at 16:25
@Vivek - were you able to find anything you may have run into in the past? — JM4
– JM4, Commented Dec 22, 2010 at 23:03
There shouldn't be a problem with your technique. Can you show us the HTML that's generated from your PHP (e.g. the "View Source" from the browser)? — Johnny Oshika
– Johnny Oshika, Commented Dec 23, 2010 at 14:23

Bambax · Accepted Answer · 2011-01-03 20:53:51Z

1

DataTables does not like to create the same table twice, which is apparently what is happening (although I don't see how, from your code). When this happens, it throws the error you mention.

(If DataTables had a problem with the number of cells it expects or the relation between the headers and the columns, it would generate another error message).

To make sure you're not using an object that is already a DataTable object, you can try to put this before the initialization:

if (oTable) {
  oTable.fnDestroy();
  oTable = undefined;
  }

answered Jan 3, 2011 at 20:53

Bambax

3,0107 gold badges35 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JM4 Over a year ago

thanks for the suggestion, it does not however resolve the issue.

Bambax Over a year ago

I have a hunch... You say that when you eliminate the PHP script then everything kind of works, but inside the PHP file there is a table with id=sortable. If you eliminate this script there should be no table left to attach DataTables to... unless there is ANOTHER table with the same id of "sortable", which would explain the error (if there are two identical ids then the DataTable is created twice, and the second one triggers the error). Can you verify that there are no duplicate ids when the PHP script is added?

JM4 Over a year ago

within the php file there is no new table, it only generates new headers

Colum · Accepted Answer · 2010-12-27 23:22:43Z

0

I dont know this plugin, so dont blame me if this answer it total bullshit.

From what I can tell, your table code is not valid. I do not have experience with this plugin, but from what I am seeing is that you are just putting everything in the thead. Which does not match the code you said that it has to be. Try this:

<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 />";
}

?>

answered Dec 27, 2010 at 23:22

Colum

3,9241 gold badge25 silver badges26 bronze badges

1 Comment

JM4 Over a year ago

@Column - my table code is valid. The php generates a portion of the table header row. The table body is then created after. As the edit and notes reflect, what is created within <tbody> is ommited for security purposes and is not the cause of the error (as removing the thead php resolves any issues strangely).

Alex Vidal · Accepted Answer · 2011-01-03 19:12:31Z

0

You aren't showing the generated output for the body of the table. Are you sure that you are generating the same number of columns in the body of your table as you are in the head?

answered Jan 3, 2011 at 19:12

Alex Vidal

4,10822 silver badges23 bronze badges

1 Comment

JM4 Over a year ago

positive. In either case and as I mention above a number fo times, removing the php code altogether (which does, without question eliminate the correct match for number of headers/body fields) does not throw an error. The output of the body is theoretically irrelevant here. I will add an edit to the overall question to further explain.

Bambax · Accepted Answer · 2011-01-04 17:21:56Z

0

Following my last comment, make sure you only have one table with id of "sortable", ie, that the PHP script does not add another table with the same id (as could be the case from the example code you provided).

If you have a duplicate id, then DataTables will try to create the table twice, resulting in the error you mention.

answered Jan 4, 2011 at 17:21

Bambax

3,0107 gold badges35 silver badges44 bronze badges

1 Comment

JM4 Over a year ago

no additional tables are created, only the <th> within the <thead><tr> tag are.

Collectives™ on Stack Overflow

jQuery Datatables throws error when dynamically created row headers

Displaying JS

TOP piece of HTML

UPDATE REGARDING COMMENTS/ANSWERS

4 Answers 4

3 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Displaying JS

TOP piece of HTML

UPDATE REGARDING COMMENTS/ANSWERS

4 Answers 4

3 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related