web-dev-qa-db-fra.com

DataTables: impossible de lire le style de propriété d'undefined

Je reçois 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 ID HTML 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>

Les tableaux columns.AdoptionTaskInfo.columns & response object existent également. Vous ne savez pas comment déboguer ce qui ne va pas. Toutes les suggestions vous seront utiles.

javascriptjquerynode.jsdatatables
89
Rookie

Le problème est que le nombre de balises <th> doit correspondre au nombre de colonnes de 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 réponse correcte est déjà présente sous forme de commentaire mais je la répète comme réponse pour que ce soit plus facile à trouver - je n'ai pas vu les commentaires)

222
ehrencrona

Vous avez indiqué que toutes les suggestions pourraient être utiles. Je résolvais donc actuellement le problème "je ne peux pas lire le style de propriété indéfinie" des DataTables, mais mon problème était essentiellement l'utilisation d'index erronés dans la section columnDefs de la phase d'initiation de la table de données. 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 problème d'index, la faute 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 de 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
        ]
    });
11
Bahadir Tasdemir

J'ai eu ce problème lorsque j'ai défini colspan dans l'en-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 a bien fonctionné.

10
JustLearning

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

Si c'est le cas, remplacez-les par "".

4
David I. Samudio

Cela peut également arriver lors du dessin d'une nouvelle (autre) table. J'ai résolu ceci en supprimant d'abord le tableau précédent:

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

2
Guest

CAUSES POSSIBLES

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

SOLUTIONS

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

LIENS

Voir jQuery DataTables: erreurs de console JavaScript communes - TypeError: impossible de lire la propriété ‘style’ de non définie pour plus d’informations.

2
Gyrocode.com

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

Note: columns: columns.AdoptionTaskInfo.columns a au moins une colonne non définie dans l'en-tête de la table

1
Stanley Okpala Nwosa

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

0
Taian