web-dev-qa-db-fra.com

TypeError: oColumn n'est pas défini lors de l'utilisation de la bibliothèque jQuery Datatables

Je ne parviens pas à afficher correctement la bibliothèque jQuery Datatables sur le tableau de mon site Web Joomla. http://datatables.net

Le script dénude à moitié mon tableau puis abandonne (la couleur de l’en-tête du tableau et la couleur du texte sont modifiées, mais pas de contrôles datatables, etc.).

Firebug renvoie également l'erreur suivante:

 TypeError: oColumn is undefined

Dans mon template Joomla index.php, j'ai le suivant dans le <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>

Le HTML/PHP ressemble à ceci:

<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>
phpjqueryhtmldatatableshtml-table
18
Iain Simpson

Pour que datatable fonctionne correctement, vos tables doivent être construites avec les balises <thead> et <tbody> appropriées.

Tous les besoins de DataTables dans votre HTML sont un <TABLE> qui est bien formé (c’est-à-dire un HTML valide), avec un en-tête (défini par une balise HTML <THEAD>) et un corps (une balise <TBODY>)

Documents datatable

29
Hazem Salama

Il se trouve que datatables est TRÈS strict quant au html qu’il accepte avant de générer une erreur. J'ai ajouté des balises à mon code HTML et maintenant cela fonctionne. Notez également que vous devez avoir des balises pour vos colonnes d'en-tête et non des balises, car cela génère également une erreur.

Le code html ressemble maintenant à ceci:

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

et appeler le jquery etc. ressemble à ceci:

<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>
4
Iain Simpson

J'espère que cela vous aidera tous, au moins à en tirer un indice.

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

Mon problème était, TypeError: col est indéfini.

Réponse résumée:

Le nombre d'éléments TH dans l'élément TR dans l'élément THead De la table DOIT ÊTRE ÉGAL au nombre d'éléments TD (ou De colonnes dans votre tableau) dans le ou les éléments TR de de votre corps dans la table.

Vous pouvez lire l'explication ci-dessous:

Le problème était que je n'avais pas inséré suffisamment d'éléments Th ou Td dans la section thead pour correspondre au nombre de colonnes imprimées en tant qu'éléments Td dans les éléments Tr de la section TBody.

Le code suivant m'a donné l'erreur.

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

Mais ajouter un élément Th de plus dans l'élément Tr à l'intérieur de l'élément THead a facilité son fonctionnement! :) Et j'ai eu l'indice du lien ci-dessus.

Et aussi, j’ai trouvé que tous les TH éléments de l’élément Tr du THead pouvaient également être TD, car c’est aussi un code HTML valide au niveau requis par les tables de données jQuery!

J'espère que j'ai aidé certains d'entre vous à économiser votre temps! :)

3
Randika Vishman

Essaye ça:

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