Tablas de datos: no se puede leer el estilo de propiedad de indefinido

117

Recibo este error con lo siguiente:

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 línea anterior que hace referencia a (función anónima) @ VM3156: 180 es:

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

Así que supongo que aquí es donde está fallando.

Existe el elemento ID HTML:

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

Además, existen las columnas.AdoptionTaskInfo.columns y matrices de objetos de respuesta. No estoy seguro de cómo depurar lo que está mal. Cualquier sugerencia será útil.

javascript jquery node.js datatables Novato
fuente
2
Busque .styleen su código. Estás intentando acceder a esa propiedad de una variable indefinida. Puede depurar desde allí.
Jecoms
80
Compruebe si el número de columnas que está intentando recuperar es el mismo que el número de <th> que ha creado.
matrixguy
12
El número de la columna no coincide con el número de columnas definidas en los javascripts que causan este problema.
Dhanuka777

Respuestas:

283

El problema es que el número de etiquetas <th> debe coincidir con el número de columnas en la configuración (la matriz con la clave "columnas"). Si hay menos etiquetas <th> que las columnas especificadas, aparece este mensaje de error ligeramente críptico.

(la respuesta correcta ya está presente como comentario, pero la estoy repitiendo como respuesta para que sea más fácil de encontrar; no vi los comentarios)

ehrencrona
fuente
2
Quiero agregar otro punto, puede ser que la gente lo encuentre útil en algún caso, si no define dataSrc, entonces en su json use "data", si usa otro nombre obtendrá este error.
Ahmed Sunny
Además, si tiene columnas que no son visibles pero que se incluyen para cosas como la búsqueda o el Editor, deben estar al final de la lista de columnas: [].
Tim Dearborn
24

POSIBLES CAUSAS

  • El número de thelementos en el encabezado o pie de página de la tabla difiere del número de columnas en el cuerpo de la tabla o definido mediante la columnsopción.
  • El atributo colspan se usa para el thelemento en el encabezado de la tabla.
  • Índice de columna incorrecto especificado en columnDefs.targetsopción.

SOLUCIONES

  • Asegúrese de que la cantidad de thelementos en el encabezado o pie de página de la tabla coincida con la cantidad de columnas definidas en la columnsopción.
  • Si usa un colspanatributo en el encabezado de la tabla, asegúrese de tener al menos dos filas de encabezado y un thelemento único para cada columna. Consulte Encabezado complejo para obtener más información.
  • Si usa la columnDefs.targetsopción, asegúrese de que el índice de columna de base cero se refiera a las columnas existentes.

ENLACES

Consulte jQuery DataTables: errores comunes de la consola de JavaScript - TypeError: no se puede leer la propiedad 'estilo' de indefinido para obtener más información.

Gyrocode.com
fuente
13

Dijiste que cualquier sugerencia sería útil, por lo que actualmente resolví mi problema de "no se puede leer la propiedad 'estilo' de indefinido" de las tablas de datos, pero mi problema era básicamente usar índices incorrectos en la columnDefssección de la fase de inicio de la tabla de datos . Obtuve 9 columnas y los índices son 0, 1, 2, .., 8 pero estaba usando índices para 9 y 10, así que después de solucionar el problema del índice incorrecto, la falla ha desaparecido. Espero que esto ayude.

En resumen, debes observar la cantidad de columnas y los índices si son consistentes en todas partes.

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

Código fijo:

    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
fuente
Esto me salvó, gracias. Yo uso "aTargets": [7], por lo que se produce un error, porque no existe una columna con el índice 7. legacy.datatables.net/usage/columns
fudu
1
Genial, estoy feliz de que mi respuesta solucione su problema, + votos por favor
Bahadir Tasdemir
10

Tuve este problema cuando configuré el colspanencabezado de la tabla. Entonces mi mesa era:

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

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

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

Luego, una vez que lo cambio a:

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

Todo funcionó bien.

Solo aprendiendo
fuente
4

Asegúrese de que en sus datos de entrada response[i]y response[i][j], no sean undefined/ null.

Si es así, reemplácelos con "".

David I. Samudio
fuente
3

También puede suceder al dibujar una nueva (otra) tabla. Resolví esto eliminando primero la tabla anterior:

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

Invitado
fuente
2

La solución es bastante sencilla. 

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

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

Nota : columnas: columnas.AdoptionTaskInfo.columns tiene al menos una columna no definida en el encabezado de la tabla

Stanley Okpala Nwosa
fuente
1

Curiosamente, recibí el siguiente error por tener un par / ésimo de más y todavía google me dirigió aquí. Lo dejaré escrito para que la gente pueda encontrarlo.

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

En mi caso, estaba actualizando la tabla de datos del lado del servidor dos veces y me da este error. Espero que ayude a alguien.

Taian
fuente