que estoy usando el plugin jQuery tablas de datos para uno de mis proyectos. Para uno en particular, el número de columnas puede variar según la cantidad de hijos que tenga un consumidor (sí, me doy cuenta de que la normalización y la técnica adecuada se insertarían en otra fila, pero es un requisito del cliente).jQuery DataTables lanza de error cuando se crean dinámicamente encabezados de fila

tablas de datos deben configurarse como tal:

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

mi guión comienza como:

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

De esta manera, los títulos de las columnas finales pueden ser 1 o 50 puntos de largo. Sin embargo, con este código dinámico en su lugar, tablas de datos arroja el siguiente 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."'

Sí he puesto "bRetrieve": true en el javascript arriba y que no hace el truco. Si elimino el código anterior, el archivo "funciona" bien pero deja fuera de las columnas necesarias para mi tabla.

¿Alguna idea?

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

pieza superior de 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> ...

ACTUALIZACIÓN cuanto a los comentarios/respuestas

he recibido una serie de respuestas que indica el número de cabeceras puede no coincidir con el número de campos en el cuerpo. Como menciono a continuación, eliminar el script php a continuación eliminaría más de 5 campos en el encabezado y, sin lugar a dudas, desequilibraría el contador. Esto, sin embargo, no causa un error y de hecho "resuelve" el problema en que las tablas de datos funcionan correctamente (aunque NO hay un registro de encabezado para más de 5 campos en el cuerpo.

Fuente

2010-12-15 JM4

nos muestran su javascript ... y el PHP genera – Incognito

... También estoy usando dataTable e hicieron exactamente lo mismo lo que está tratando de hacer .... me muestre su código de inicialización dataTable ... – Vivek

@vivek - Perdón por la demora, estaba fuera de la ciudad. Publiqué mi código de inicialización JS arriba. – JM4

No conozco este complemento, así que no me culpes si esta respuesta es una mierda total

Por lo que puedo decir, su código de tabla no es válido. No tengo experiencia con este complemento, pero por lo que veo es que simplemente está poniendo todo en el tema. lo cual no coincide con el código que dice que tiene que ser Prueba esto:.?

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

Fuente

2010-12-27 23:22:43 Colum

@Column - mi código de tabla es válido. El php genera una porción de la fila del encabezado de la tabla. El cuerpo de la tabla se crea después. Como la edición y notas de reflejar, lo que se crea dentro se oitirán por motivos de seguridad y no es la causa del error (como la eliminación de la culata en T php resuelve cualquier problema extrañamente). – JM4

usted no está demostrando la salida generada por el cuerpo de la tabla. ¿Estás seguro de que estás generando la misma cantidad de columnas en el cuerpo de tu mesa que en la cabeza?

Fuente

2011-01-03 19:12:31

positivo. En cualquier caso y como mencioné anteriormente varias veces, eliminar el código php por completo (lo que hace, sin duda eliminar la coincidencia correcta para el número de encabezados/campos del cuerpo) no arroja un error. La salida del cuerpo es teóricamente irrelevante aquí. Agregaré una edición a la pregunta general para una explicación más detallada. – JM4

tablas de datos no le gusta para crear la misma mesa dos veces, que al parecer es lo que está sucediendo (aunque no veo cómo, a partir del código). Cuando esto sucede, arroja el error que mencionas.

(Si DataTables tenía un problema con el número de células que espera o la relación entre las cabeceras y las columnas, generaría otro mensaje de error).

Para asegurarse de que no está utilizando un objeto que ya es un objeto DataTable, se puede tratar de poner esto antes de la inicialización:

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

Fuente

2011-01-03 20:53:51 Bambax

gracias por la sugerencia, pero no resuelve el problema. – JM4

Tengo una corazonada ... Dices que cuando eliminas el script PHP todo funciona, pero dentro del archivo PHP hay una tabla con id = sortable. Si elimina esta secuencia de comandos no debería haber ninguna tabla para adjuntar DataTables a ... a menos que haya OTRA tabla con el mismo ID de "ordenable", lo que explicaría el error (si hay dos identificadores idénticos, entonces la DataTable se crea dos veces , y el segundo desencadena el error). ¿Puedes verificar que no hay identificadores duplicados cuando se agrega el script PHP? – Bambax

dentro del archivo php no hay ninguna nueva tabla, sólo genera nuevas cabeceras – JM4

Después de mi último comentario, asegúrese de que sólo tiene una tabla con id de "ordenable", es decir, que el script PHP no agrega otra tabla con el mismo ID (como podría ser el caso del código de ejemplo que proporcionó).

Si usted tiene un ID duplicado, a continuación, tablas de datos a tratar de crear la mesa dos veces, lo que resulta en el error que mencionas.

Fuente

2011-01-04 17:21:56 Bambax

no se crean tablas adicionales, sólo el dentro de la etiqueta son. – JM4

jQuery DataTables lanza de error cuando se crean dinámicamente encabezados de fila

Viendo JS

pieza superior de HTML

ACTUALIZACIÓN cuanto a los comentarios/respuestas

Respuesta

Cuestiones relacionadas