DataTables: impossible de lire le style de propriété non défini

118

J'obtiens cette erreur avec ce qui suit:

jquery.dataTables.js:4089 Uncaught TypeError: Cannot read property 'style' of undefined(…)
_fnCalculateColumnWidths @ jquery.dataTables.js:4089
_fnInitialise @ jquery.dataTables.js:3216
(anonymous function) @ jquery.dataTables.js:6457
each @ jquery-2.0.2.min.js:4
each @ jquery-2.0.2.min.js:4
DataTable @ jquery.dataTables.js:5993
$.fn.DataTable @ jquery.dataTables.js:14595
(anonymous function) @ VM3329:1
(anonymous function) @ VM3156:180
l @ jquery-2.0.2.min.js:4
fireWith @ jquery-2.0.2.min.js:4
k @ jquery-2.0.2.min.js:6
(anonymous function) @ jquery-2.0.2.min.js:6

La ligne ci-dessus faisant référence à (fonction anonyme) @ VM3156: 180 est:

                TASKLISTGRID = $("#TASK_LIST_GRID").DataTable({
                    data : response,
                    columns : columns.AdoptionTaskInfo.columns,
                    paging: true
                });

Donc je suppose que c'est là que ça échoue.

L'élément HTML ID existe:

  <table id="TASK_LIST_GRID" class="table table-striped table-bordered table-hover dataTable no-footer" width="100%" role="grid" aria-describedby="TASK_LIST_GRID_info">
  <thead>
    <tr role="row">
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Solution</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Status</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Category</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Type</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Due Date</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Create Date</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Owner</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Comments</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Mnemonic</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Domain</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Approve</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Dismiss</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

En outre, il existe des colonnes, des tableaux AdoptionTaskInfo.columns et des objets de réponse. Je ne sais pas comment déboguer ce qui ne va pas. Toutes les suggestions seront utiles.

javascript jquery node.js datatables Débutant
la source
2
Cherchez .styledans votre code. Vous essayez d'accéder à cette propriété d'une variable non définie. Vous pouvez déboguer à partir de là.
Jecoms
80
Vérifiez si le nombre de colonnes que vous essayez d'extraire est identique au nombre de <th> que vous avez créés.
matrixguy
12
Nombre de colonnes incompatibles avec le nombre de colonnes définies dans les javascripts à l'origine de ce problème.
Dhanuka777

Réponses:

284

Le problème est que le nombre de balises <th> doit correspondre au nombre de colonnes dans la configuration (le tableau avec la clé "colonnes"). S'il y a moins de balises <th> que de colonnes spécifiées, vous obtenez ce message d'erreur légèrement cryptique.

(la bonne réponse est déjà présente sous forme de commentaire mais je la répète comme réponse donc c'est plus facile à trouver - je n'ai pas vu les commentaires)

ehrencrona
la source
2
Je veux ajouter un autre point, peut-être que les gens le trouveront utile dans certains cas, si vous ne définissez pas dataSrc, alors dans votre json, utilisez "data", si vous utilisez un autre nom, vous obtiendrez cette erreur.
Ahmed Sunny
De plus, si vous avez des colonnes qui ne sont pas visibles mais incluses pour des choses comme la recherche ou l'éditeur, elles doivent être à la fin de vos colonnes: [] list.
Tim Dearborn
Merci beaucoup, je me
posais des
24

CAUSES POSSIBLES

  • Le nombre d' théléments dans l'en-tête ou le pied de page du tableau diffère du nombre de colonnes dans le corps du tableau ou défini à l'aide de l' columnsoption.
  • L'attribut colspan est utilisé pour l' thélément dans l'en-tête du tableau.
  • Index de colonne incorrect spécifié dans l' columnDefs.targetsoption.

SOLUTIONS

  • Assurez-vous que le nombre d' théléments dans l'en-tête ou le pied de page du tableau correspond au nombre de colonnes défini dans lecolumns option.
  • Si vous utilisez l' colspanattribut dans l'en-tête du tableau, assurez-vous d'avoir au moins deux lignes d'en-tête et un thélément unique pour chaque colonne. Voir En- tête complexe pour plus d'informations.
  • Si vous utilisez l' columnDefs.targetsoption, assurez-vous que l'index de colonne de base zéro fait référence aux colonnes existantes.

LIENS

Voir jQuery DataTables: Erreurs courantes de la console JavaScript - TypeError: Impossible de lire la propriété 'style' de undefined pour plus d'informations.

Gyrocode.com
la source
13

Vous avez dit que toutes les suggestions seraient utiles, donc actuellement, j'ai résolu mon problème DataTables "Impossible de lire la propriété" style "indéfini" mais mon problème était essentiellement d'utiliser des index incorrects lors de la phase d'initiation de la table de données. columnDefs section de . J'ai 9 colonnes et les index sont 0, 1, 2, .., 8 mais j'utilisais des index pour 9 et 10 donc après avoir corrigé le mauvais problème d'index, le défaut a disparu. J'espère que ça aide.

En bref, vous devez surveiller le montant de vos colonnes et les index s'ils sont cohérents partout.

Code du buggy:

    jQuery('#table').DataTable({
        "ajax": {
            url: "something_url",
            type: 'POST'
        },
        "processing": true,
        "serverSide": true,
        "bPaginate": true,
        "sPaginationType": "full_numbers",
        "columns": [
            { "data": "cl1" },
            { "data": "cl2" },
            { "data": "cl3" },
            { "data": "cl4" },
            { "data": "cl5" },
            { "data": "cl6" },
            { "data": "cl7" },
            { "data": "cl8" },
            { "data": "cl9" }
        ],
        columnDefs: [
            { orderable: false, targets: [ 7, 9, 10 ] } //This part was wrong
        ]
    });

Code fixe:

    jQuery('#table').DataTable({
        "ajax": {
            url: "something_url",
            type: 'POST'
        },
        "processing": true,
        "serverSide": true,
        "bPaginate": true,
        "sPaginationType": "full_numbers",
        "columns": [
            { "data": "cl1" },
            { "data": "cl2" },
            { "data": "cl3" },
            { "data": "cl4" },
            { "data": "cl5" },
            { "data": "cl6" },
            { "data": "cl7" },
            { "data": "cl8" },
            { "data": "cl9" }
        ],
        columnDefs: [
            { orderable: false, targets: [ 5, 7, 8 ] } //This part is ok now
        ]
    });
Bahadir Tasdemir
la source
Cela m'a sauvé, merci. J'utilise "aTargets": [7], donc c'est aller à l'erreur, car il n'existe pas de colonne avec l'index 7. legacy.datatables.net/usage/columns
fudu
1
Super, je suis heureux que ma réponse ait résolu votre problème, + votes s'il vous plaît
Bahadir Tasdemir
10

J'ai eu ce problème lorsque j'ai défini l' colspanen-tête du tableau. Donc ma table était:

        <thead>
            <tr>
                <th colspan="2">Expenses</th>

                <th colspan="2">Income</th>

                <th>Profit/Loss</th>
            </tr>
        </thead>

Puis une fois que je le change en:

        <thead>
            <tr>
                <th>Expenses</th>
                <th></th>
                <th>Income</th>
                <th></th>
                <th>Profit/Loss</th>
            </tr>
        </thead>

Tout fonctionnait très bien.

JustLearning
la source
4

Assurez-vous que dans vos données d'entrée, response[i]et response[i][j], ne sont pas undefined/ null.

Si tel est le cas, remplacez-les par "".

David I. Samudio
la source
3

Cela peut également se produire lors du dessin d'une nouvelle (autre) table. J'ai résolu ce problème en supprimant d'abord le tableau précédent:

$("#prod_tabel_ph").remove();

Client
la source
2

La solution est assez simple. 

  <table id="TASK_LIST_GRID" class="table table-striped table-bordered table-hover dataTable no-footer" width="100%" role="grid" aria-describedby="TASK_LIST_GRID_info">
  <thead>
    <tr role="row">
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Solution</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Status</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Category</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Type</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Due Date</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Create Date</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Owner</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Comments</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Mnemonic</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Domain</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Approve</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Dismiss</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>
Développer l'extrait

                TASKLISTGRID = $("#TASK_LIST_GRID").DataTable({
                    data : response,
                    columns : columns.AdoptionTaskInfo.columns,
                    paging: true
                });
                
                //Note: columns : columns.AdoptionTaskInfo.columns has at least a column not definded in the <thead>
Développer l'extrait

Remarque : colonnes: colonnes.AdoptionTaskInfo.columns a au moins une colonne non définie dans l'en-tête du tableau

Stanley Okpala Nwosa
la source
1

Curieusement, j'obtenais l'erreur suivante pour avoir une ème / ème paire de trop et Google m'a toujours dirigé ici. Je vais le laisser par écrit pour que les gens puissent le trouver.

jquery.dataTables.min.js:27 Uncaught TypeError: Cannot read property 'className' of undefined
at ua (jquery.dataTables.min.js:27)
at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:127)
at Function.each (jquery.min.js:2)
at n.fn.init.each (jquery.min.js:2)
at n.fn.init.j (jquery.dataTables.min.js:116)
at HTMLDocument.<anonymous> (history:619)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at Function.ready (jquery.min.js:2)
at HTMLDocument.K (jquery.min.js:2)
Tomás Gaete
la source
0

Dans mon cas, je mettais à jour deux fois la table de données côté serveur et cela me donne cette erreur. J'espère que ça aide quelqu'un.

Taian
la source