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

Question

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.

Answer 1

Le problème est que les nombre de tags doivent correspondre au nombre de colonnes dans la configuration (le tableau avec la touche « colonnes »). S’il y a des balises moins que les colonnes spécifiées, vous obtenez ce message d’erreur un peu cryptiques.

(la bonne réponse est déjà présente sous forme d’un commentaire, mais je me le répète comme une réponse, donc il est plus facile à trouver - je ne vois pas les commentaires)

Answer 2

Vous avez dit toutes les suggestions wold être utile, et en ce moment j'ai résolu mon DataTables "impossible de lire la propriété "style " undefined" problème, mais mon problème était essentiellement l'aide de faux indices à la table de données de l'initiation de la phase d' columnDefs section. J'ai eu 9 colonnes et les indices 0, 1, 2, .. , 8 mais j'ai été en utilisant les indices pour les 9 et 10 ainsi, après la fixation d'un mauvais indice de question que le défaut a disparu. J'espère que cette aide.

En bref, vous avez à regarder votre colonnes de montant et de l'index si uniforme partout.

Buggy Code:

    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
        ]
    });

Answer 3

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

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

Answer 5

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();