DataTables: impossibile leggere lo stile di proprietà di undefined

118

Ricevo questo errore con quanto segue:

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 riga sopra che fa riferimento a (funzione anonima) @ VM3156: 180 è:

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

Quindi immagino che sia qui che sta fallendo.

L'elemento ID HTML esiste:

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

Inoltre, esistono gli array di oggetti columns.AdoptionTaskInfo.columns e response. Non sono sicuro di come eseguire il debug di ciò che non va .. Eventuali suggerimenti saranno utili ..

javascript  jquery  node.js  datatables 
— recluta
fonte
2
Cerca .stylenel tuo codice. Stai tentando di accedere a quella proprietà di una variabile non definita. Puoi eseguire il debug da lì.
— Jecoms
80
Controlla se il numero di colonne che stai tentando di recuperare è uguale al numero di <th> che hai creato.
— matrixguy
12
Il numero della mancata corrispondenza della colonna con il numero di colonne definite in JavaScript che causa questo problema.
— Dhanuka777

Risposte:

284

Il problema è che il numero di tag <th> deve corrispondere al numero di colonne nella configurazione (l'array con la chiave "colonne"). Se sono presenti meno tag <th> rispetto alle colonne specificate, viene visualizzato questo messaggio di errore leggermente criptico.

(la risposta corretta è già presente come commento ma la ripeto come risposta quindi è più facile da trovare - non ho visto i commenti)

— ehrencrona
fonte
2
Voglio aggiungere un altro punto, potrebbe essere che le persone lo trovino utile in qualche caso, se non definisci dataSrc, quindi nel tuo json usa "dati", se usi un altro nome otterrai questo errore.
— Ahmed Sunny
Inoltre, se hai colonne che non sono visibili ma incluse per cose come la ricerca o l'Editor, devono essere alla fine della tua lista di colonne: [].
— Tim Dearborn
Grazie mille, mi chiedevo problemi con i javascript ..
— Jimil Choksi
24

CAUSE POSSIBILI

  • Il numero di thelementi nell'intestazione o nel piè di pagina della tabella è diverso dal numero di colonne nel corpo della tabella o definito utilizzando l' columnsopzione.
  • L'attributo colspan viene utilizzato per l' thelemento nell'intestazione della tabella.
  • Indice di colonna non corretto specificato columnDefs.targetsnell'opzione.

SOLUZIONI

  • Assicurati che il numero di thelementi nell'intestazione o nel piè di pagina della tabella corrisponda al numero di colonne definite columnsnell'opzione.
  • Se utilizzi l' colspanattributo nell'intestazione della tabella, assicurati di avere almeno due righe di intestazione e un thelemento univoco per ogni colonna. Vedere Intestazione complessa per ulteriori informazioni.
  • Se utilizzi l' columnDefs.targetsopzione, assicurati che l'indice di colonna a base zero si riferisca a colonne esistenti.

LINK

Vedere jQuery DataTables: Errori comuni della console JavaScript - TypeError: Impossibile leggere la proprietà 'style' di undefined per ulteriori informazioni.

— Gyrocode.com
fonte
13

Hai detto che qualsiasi suggerimento sarebbe stato utile, quindi al momento ho risolto il mio problema di DataTables "non può leggere lo 'stile' di proprietà di undefined" ma il mio problema era fondamentalmente l'utilizzo di indici errati nella columnDefssezione della fase di avvio della tabella dati . Ho 9 colonne e gli indici sono 0, 1, 2, .., 8 ma stavo usando gli indici per 9 e 10 quindi dopo aver corretto il problema dell'indice sbagliato l'errore è scomparso. Spero che aiuti.

In breve, devi controllare la quantità di colonne e gli indici se coerenti ovunque.

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

Codice fisso:

    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
fonte
Questo mi ha salvato, grazie. Uso "aTargets": [7], quindi va in errore, perché non esiste una colonna con indice 7. legacy.datatables.net/usage/columns
— fudu
1
Fantastico, sono felice che la mia risposta abbia risolto il tuo problema, + voti per favore
— Bahadir Tasdemir
10

Ho avuto questo problema quando ho impostato colspannell'intestazione della tabella. Quindi il mio tavolo era:

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

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

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

Quindi una volta che lo cambio in:

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

Tutto ha funzionato bene.

— Solo imparando
fonte
4

Assicurati che nei tuoi dati di input, response[i]e response[i][j], non siano undefined/null .

In tal caso, sostituirli con "".

— David I. Samudio
fonte
3

Può anche accadere quando si disegna una nuova (altra) tabella. L'ho risolto rimuovendo prima la tabella precedente:

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

— ospite
fonte
2

La soluzione è piuttosto semplice. 

  <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>
Espandi lo snippet

                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>
Espandi lo snippet

Nota : colonne: columns.AdoptionTaskInfo.columns ha almeno una colonna non definita nell'intestazione della tabella

— Stanley Okpala Nwosa
fonte
1

Stranamente stavo ricevendo il seguente errore per avere una coppia di troppo e ancora Google mi ha indirizzato qui. Lo lascio scritto in modo che le persone possano trovarlo.

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

Nel mio caso, stavo aggiornando due volte il datatable lato server e mi dà questo errore. Spero che aiuti qualcuno.

— Taian
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.