2012-09-05 11 views
17

Tengo problemas para mostrar la biblioteca jQuery Datatables correctamente en la tabla de mi sitio web de Joomla. http://datatables.netTypeError: oColumn no está definido Al usar jQuery Datatables Library

La secuencia de comandos está a medio diseñar mi tabla y luego darse por vencido (obtengo el color del encabezado de la tabla cambiado y el color del texto, pero no los controles de datatables, etc.).

Firebug también está lanzando el siguiente error:

TypeError: oColumn is undefined 

En mis plantillas de Joomla index.php Tengo el siguiente en el <head>:

<script src="./datatables/js/jquery.js" type="text/javascript"></script> 
<script src="./datatables/js/jquery.dataTables.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    jQuery.noConflict();     
    jQuery(document).ready(function() { 
    jQuery('#staff_table').dataTable({ 
     "bLengthChange": true, 
     "bFilter": true, 
     "bSort": true, 
     "bInfo": true, 
     "bAutoWidth": true 
     }); 
    }); 
</script> 

El HTML/PHP es así:

<h3>Members of Staff</h3> 
<p>If you're looking for a member of staff at Tower Road Academy, you'll find their details here.</p> 
<table class="staff_table" id="staff_table"> 
    <tr class="staff_table_head"> 
     <th>Name</th> 
     <th>Job Title</th> 
     <th>Email Address</th> 
    </tr> 

    <?php 
     $result = mysql_query("SELECT * FROM itsnb_chronoforms_data_addstaffmember"); 

     while($row = mysql_fetch_array($result)) 
     { 
     echo '<tr>'; 
     echo '<td>' . $row['staff_name'] . '</td><td>' . $row['staff_job'] . '</td><td><a  href=mailto:"' . $row['staff_email'] . '">' . $row['staff_email'] . '</a>' . '</td>'; 
     echo '</tr>'; 
     } 
    ?> 
</table> 

Respuesta

28

Para que la tabla de datos funcione correctamente, las tablas deben construirse con las etiquetas <thead> y <tbody> adecuadas.

All DataTables needs in your HTML is a <TABLE> which is well formed (i.e. valid HTML), with a header (defined by a <THEAD> HTML tag) and a body (a <TBODY> tag)

Datatable docs

+0

gracias, esto hizo clic al mismo tiempo que estaba escribiendo a continuación :-D –

+0

@IainSimpson Sí, acabo de toparme con esto bastante recientemente, ¡así que estaba justo en la cima de mi cabeza! – hsalama

+0

gran ayuda ... gracias .. – Charmie

0

Pruebe esto:

jQuery('#staff_table').dataTable({ 
         "bPaginate": true, 
         "bLengthChange": true, 
         "bFilter": true, 
         "bSort": true, 
         "bInfo": true, 
         "bAutoWidth": true, 
        "aoColumns": [ 
             null, 
             null //put as many null values as your columns 

        ] 
        }); 
+0

nCell no está definido –

4

lo arreglaron!, Resulta tablas de datos es muy estricto en el html se acepta antes de que se emita un error. Agregué etiquetas a mi html y ahora está funcionando, también tenga en cuenta que debe tener etiquetas para sus columnas de encabezado y no etiquetas, ya que esto también arroja un error.

El código HTML que ahora se ve así:

<h3>Members of Staff</h3> 
<p>If you're looking for a member of staff at Tower Road Academy, you'll find their  details here.</p> 
<table class="staff_table" id="staff_table"> 
<thead> 
<tr class="staff_table_head"> 
<th>Name</th> 
<th>Job Title</th> 
<th>Email Address</th> 
</tr> 
</thead> 

<?php 
$result = mysql_query("SELECT * FROM itsnb_chronoforms_data_addstaffmember"); 

while($row = mysql_fetch_array($result)) 
    { 
echo '<tr>'; 
echo '<td>' . $row['staff_name'] . '</td><td>' . $row['staff_job'] . '</td><td><a   href=mailto:"' . $row['staff_email'] . '">' . $row['staff_email'] . '</a>' . '</td>'; 
    echo '</tr>'; 
    } 
?> 
</table> 

y llamar a la jQuery etc se ve así:

<script src="./datatables/js/jquery.js" type="text/javascript"></script> 
    <script src="./datatables/js/jquery.dataTables.js" type="text/javascript"></script> 

      <script type="text/javascript"> 

jQuery(document).ready(function() { 
jQuery('#staff_table').dataTable({ 
    "bLengthChange": true, 
    "bFilter": true, 
    "bSort": true, 
    "bInfo": true, 
    "bAutoWidth": true 
}); 
}); 

    </script> 
3

espero que esto le ayudaría a todos, al menos para obtener una pista de eso.

http://datatables.net/forums/discussion/comment/42607

Mi problema era, TypeError: Col no está definido.

respuesta Resumido:

Number of TH elements within the TR element within the THead element of the Table MUST BE EQUAL to the Number of TD elements(or number of columns within your Table Rows) within the TR element(s) of your TBody in the Table.

Usted puede leer la explicación abajo:

El problema era que no me había puesto suficientes elementos Th o Td dentro de la sección de la culata en T a ser igual al número de columnas que imprimo como elementos Td dentro de los elementos Tr dentro de la sección TBody.

El siguiente código me dio el error.

<thead> 
<tr> 
    <th> Heading 1</th> 
    <th> Heading 2</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td> Column 1 </td> 
    <td> Column 2</td> 
    <td> Column 3</td> 
</tr> 
</tbody>" 

Pero sólo añadir una más Th elemento a elemento Tr dentro del elemento THead hecho funciona como un encanto! :) Y obtuve la pista del enlace de arriba.

Y también, encontré que todos los elementos TH en el elemento Tr de THead también podrían ser elementos TD, ¡ya que también es HTML válido al nivel requerido por jQuery DataTables!

¡Espero haber ayudado a algunos de ustedes a ahorrar su tiempo! :)

Cuestiones relacionadas