TypeError: oColumn is undefined Quando si utilizza la libreria di datatables jQuery

Ho riscontrato un problema nel mostrare correttamente la libreria jQuery Datatables sulla mia tabella del sito Joomla. http://datatables.net TypeError: oColumn is undefined Quando si utilizza la libreria di datatables jQuery

Lo script è la metà styling mio tavolo e poi rinunciare (io sono sempre il colore cambiato e il testo di colore intestazione della tabella, ma non DataTable controlli, ecc).

Firebug è anche gettando il seguente errore:

TypeError: oColumn is undefined

Nei miei template di Joomla index.php ho quanto segue nella <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>

Il codice HTML/PHP assomiglia a questo:

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

fonte

2012-09-05 Iain Simpson

Per datatable per funzionare correttamente, le tabelle devono essere costruiti con una corretta <thead> e <tbody> tag.

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

fonte

2012-09-05 12:04:46 hsalama

grazie, questo cliccato allo stesso tempo stavo scrivendo il seguito :-D –

@IainSimpson sì, ho appena imbattuto in questo poco tempo fa, quindi è stato proprio in cima della mia testa! – hsalama

ottimo aiuto..grazie .. – Charmie

Prova questo:

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 

        ] 
        });

fonte

2012-09-05 12:01:24

Ncell è indefinito –

si è occupata!, Si scopre DataTable è molto severa circa l'html che accetta prima che genera un errore. Ho aggiunto i tag al mio html e ora funziona, si noti inoltre che è necessario disporre di tag per le colonne di intestazione e non i tag in quanto anche questo genera un errore.

il codice html appare come segue:

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

e chiamando il jquery ecc assomiglia a questo:

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

fonte

2012-09-05 12:09:04

Spero che questo potrebbe aiutare tutti, almeno per ottenere un pizzico di esso.

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

Il mio problema era, TypeError: col non è definito.

Risposta Riassumendo:

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.

Potete leggere la spiegazione sotto:

Il problema era che non avevo messo abbastanza elementi Th Td o all'interno della sezione thead per essere uguale al numero di colonne che stampo come elementi Td all'interno degli elementi Tr all'interno della sezione TBody.

Il seguente codice mi ha fornito l'errore.

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

Ma aggiungere solo un altro elemento Th all'elemento Tr all'interno dell'elemento THead ha funzionato come un incantesimo! :) E ho ricevuto il suggerimento dal link qui sopra.

E inoltre, ho scoperto che tutti gli elementi TH all'interno dell'elemento Tr di THead potrebbero essere anche elementi TD, poiché è anche HTML valido per il livello richiesto da jQuery DataTables!

Spero di aver aiutato alcuni di voi a risparmiare tempo! :)

fonte

2013-12-19 06:29:55

TypeError: oColumn is undefined Quando si utilizza la libreria di datatables jQuery

risposta

Problemi correlati