web-dev-qa-db-fra.com

Uncaught TypeError: Impossible de lire la propriété 'className' de non définie

L'erreur suivante est générée dans les outils de développement de Google Chrome:

Uncaught TypeError: Impossible de lire la propriété 'className' de non définie 

Le code sur lequel l'erreur est générée est: 

var oTable = $('#resultstable').dataTable({
                            "bAutoWidth" : true,
                            "iDisplayLength" : 10,
                            "bFilter" : false,
                            "bLengthChange" : false
                        });

resultstable est l'id d'une table dans le code HTML:

<table cellpadding="0" cellspacing="0" border="0" id="resultstable"
                    name="resultstable" class="display datatable">

La chose étrange est qu’après la balise table, il y a une instruction if. Le tableau fonctionne parfaitement et le CSS s'affiche correctement lorsque le programme est envoyé dans la section else if{}, mais renvoie l'erreur ci-dessus et aucun CSS n'est appliqué lorsqu'il est dans la section if{}.

Aidez-moi, s'il vous plaît! 

javascriptcssgoogle-chromedatatableshtml-table
25
ph_leh

L'autre réponse m'a mis sur la bonne voie.

Plus succinctement, l'erreur était que la table que je créais était incorrecte.

Mes colonnes d'en-tête (à l'intérieur d'une tête de parcours) ne correspondaient pas à mes colonnes de lignes (à l'intérieur du corps)

Dans ma situation, j'avais trop de colonnes dans l'en-tête.

50
Nathan Koop

Une autre cause possible est que vous listiez plus de colonnes dans l'attribut "aoColumnDefs" qu'il n'y a d'éléments "td" dans la table.

var yourTable = $('#product-search-results-table').dataTable({
    // If you only have three columns in the HTML table, then this line will cause an error, because it lists four columns in "aoColumnDefs".
    "aoColumnDefs": [{ "bSortable": false, "aTargets": [0, 1, 2, 3] }]
});
11
Toby Artisan

Datatables nécessite que votre table HTML soit parfaite. J'ai constaté que j'avais cette erreur alors que je n'avais pas la même quantité de <th> et <td>. Assurez-vous de ne pas avoir d’en-tête supplémentaire.

10
Justin

J'ai une erreur identique à celle que vous avez maintenant. Une fois, j'ai rencontré une erreur très similaire en utilisant la bibliothèque choisie. Le problème était (dans le cas de Chosen) que les identifiants avec les caractères [] étaient utilisés, ce qui rendait le Javascript confus entre les sélecteurs css et les identifiants (rappelez-vous qu'en CSS, nous pouvons utiliser [] pour spécifier des attributs).

Dans le cas de DataTables, cependant, j'ai remarqué que le script DataTables lui-même préfigurait class = " " avant le premier élément de chaque élément tr de la variable tbody. 

La raison en était que la sortie HTML du php avait une erreur logique. Le code fautif:

<?php
for ($currentRow = 0 ; $currentRow <= $query_length; $currentRow++) {
        ?>
        <tr>
        <?php
        list($job_id, $company_id, $job_title, $industry_id, $profession_int, $job_openings, $job_city, $job_salary_start, $job_end_date, $job_start_date, $job_skills, $company_name, $isConfidential, $job_experience_level) = dbRow($query_results, $currentRow);
      echo "<td class = \"detailed-job-row\">" . $job_title . "</td>";
      echo "<td class = \"detailed-job-row\">" . $company_name . "</td>";
      echo "<td class = \"detailed-job-row\">" . $industry_id . "</td>";
      echo "<td class = \"detailed-job-row\">" . $profession_int . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_openings . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_city . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_salary_start . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_end_date . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_start_date . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_skills . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_experience_level . "</td>";
      ?>
        </tr>
        <?php  
     } ?>
    </tbody>
  </table>
<?php
}
?>

Il y avait une erreur au bas de la table longue et longue, indiquant que postgres ne pouvait pas aller à la ligne 208. Cela me disait que je devais arrêter de faire la boucle à i - 1 ou $currentRow - 1.

D'où le code de travail fixe:

<?php
for ($currentRow = 0 ; $currentRow <= $query_length - 1; $currentRow++) {
        ?>
        <tr>
        <?php
        list($job_id, $company_id, $job_title, $industry_id, $profession_int, $job_openings, $job_city, $job_salary_start, $job_end_date, $job_start_date, $job_skills, $company_name, $isConfidential, $job_experience_level) = dbRow($query_results, $currentRow);
      echo "<td class = \"detailed-job-row\">" . $job_title . "</td>";
      echo "<td class = \"detailed-job-row\">" . $company_name . "</td>";
      echo "<td class = \"detailed-job-row\">" . $industry_id . "</td>";
      echo "<td class = \"detailed-job-row\">" . $profession_int . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_openings . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_city . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_salary_start . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_end_date . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_start_date . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_skills . "</td>";
      echo "<td class = \"detailed-job-row\">" . $job_experience_level . "</td>";
      ?>
        </tr>
        <?php  
     } ?>
    </tbody>
  </table>
<?php
}
?>

Cette modification a permis à DataTables de fonctionner correctement.

Donc, bien que je ne puisse pas fournir une solution efficace, je vous conseille de regarder votre balise HTML, car cela pourrait être la source de votre problème (ex, votre table a-t-elle une tbody?).

2
user1429980

Dans mon cas spécifique, les propriétés aTargets ont été définies avec des index de tableau hors des limites de mes éléments.

$('.datatable').dataTable({
  aoColumnDefs: [
    {
      bSortable: false,
      aTargets: [0, 6]
    }
  ],
  aaSorting: []
});

Cet ensemble, il y avait 7 colonnes td, mais il n'y en avait que 6. Le changer pour le suivant corrigea:

$('.datatable').dataTable({
  aoColumnDefs: [
    {
      bSortable: false,
      aTargets: [0, 5]
    }
  ],
  aaSorting: []
});
1
jth_92

Cette erreur est générée car lors du premier chargement de dom, vous utilisiez avant de déclarer.

pour cette erreur j'avais une solution écrite ci-dessous:

vous pouvez ajouter si la condition élément n'est pas indéfini comme ci-dessous

if(document.getElementsByTagName('button') !== undefined){
  // and write your needed code here
}
0
dipak harishbhai

Problème similaire rencontré. Le cas racine était que, alors que dataTable était sur le point de prendre le contrôle de la table, notre code tentait également de manipuler les propriétés de la table simultanément. Le message d'erreur ne le dit pas, cependant, une fois la table laissée à la gestion exclusive de dataTable, le problème avait disparu.

0
Gil Shapir