DataTables: não é possível ler o estilo de propriedade de indefinido

118

Estou recebendo este erro com o seguinte:

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

A linha acima referindo-se a (função anônima) @ VM3156: 180 é:

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

Portanto, estou supondo que é aqui que está falhando.

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

Além disso, as matrizes de objeto columns.AdoptionTaskInfo.columns e resposta existem. Não tenho certeza de como depurar o que está errado .. Todas as sugestões serão úteis ..

javascript  jquery  node.js  datatables 
— Novato
fonte
2
Procure .styleem seu código. Você está tentando acessar essa propriedade de uma variável indefinida. Você pode depurar a partir daí.
— Jecoms,
80
Verifique se o número de colunas que você está tentando buscar é igual ao número de <th> que você criou.
— matrixguy
12
O número da incompatibilidade da coluna com o número de colunas definidas em javascripts causando este problema.
— Dhanuka777

Respostas:

284

O problema é que o número de tags <th> precisa corresponder ao número de colunas na configuração (a matriz com a chave "colunas"). Se houver menos tags <th> do que colunas especificadas, você receberá esta mensagem de erro um pouco enigmática.

(a resposta correta já está presente como um comentário, mas estou repetindo como uma resposta para ficar mais fácil de encontrar - não vi os comentários)

— Ehrencrona
fonte
2
Eu quero adicionar outro ponto, pode ser que as pessoas achem útil em algum caso, se você não definir dataSrc então em seu json use "data", se você usar outro nome você obterá este erro.
— Ahmed Sunny
Além disso, se você tiver colunas que não são visíveis, mas incluídas para itens como pesquisa ou o Editor, elas devem estar no final de suas colunas: [] lista.
— Tim Dearborn
Muito obrigado, estava me perguntando sobre problemas em javascripts ..
— Jimil Choksi
24

CAUSAS POSSÍVEIS

  • O número de thelementos no cabeçalho ou rodapé da tabela difere do número de colunas no corpo da tabela ou definido por columnsopção.
  • O atributo colspan é usado para o thelemento no cabeçalho da tabela.
  • Índice de coluna incorreto especificado na columnDefs.targetsopção.

SOLUÇÕES

  • Certifique-se de que o número de thelementos no cabeçalho ou rodapé da tabela corresponda ao número de colunas definidas na columnsopção.
  • Se você usar o colspanatributo no cabeçalho da tabela, certifique-se de ter pelo menos duas linhas de cabeçalho e um thelemento exclusivo para cada coluna. Consulte Cabeçalho complexo para obter mais informações.
  • Se você usar a columnDefs.targetsopção, certifique-se de que o índice da coluna com base em zero se refere às colunas existentes.

LINKS

Consulte jQuery DataTables: Erros comuns do console JavaScript - TypeError: Não é possível ler a propriedade 'style' de undefined para obter mais informações.

— Gyrocode.com
fonte
13

Você disse que qualquer sugestão seria útil, então, atualmente, resolvi meu problema de DataTables "não consigo ler a propriedade 'estilo' de indefinido", mas meu problema era basicamente usar índices errados na columnDefsseção da fase de iniciação da tabela de dados . Eu tenho 9 colunas e os índices são 0, 1, 2, .., 8, mas eu estava usando índices para 9 e 10, então depois de consertar o problema de índice errado, a falha desapareceu. Eu espero que isso ajude.

Resumindo, você deve observar a quantidade de colunas e índices se consistentes em todos os lugares.

Código 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 Fixo:

    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
Isso me salvou, obrigado. Eu uso "aTargets": [7], então vai para o erro, porque não existe coluna com índice 7. legacy.datatables.net/usage/columns
— fudu
1
Ótimo, fico feliz que minha resposta corrigiu seu problema, + votos, por favor
— Bahadir Tasdemir
10

Eu tive esse problema quando configurei colspanno cabeçalho da tabela. Então minha mesa era:

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

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

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

Então, quando eu mudar para:

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

Tudo funcionou muito bem.

— JustLearning
fonte
4

Certifique-se de que em seus dados de entrada, response[i]e response[i][j], não são undefined/ null.

Nesse caso, substitua-os por "".

— David I. Samudio
fonte
3

Também pode acontecer ao desenhar uma nova (outra) mesa. Resolvi isso removendo primeiro a tabela anterior:

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

— Convidado
fonte
2

A solução é bem simples. 

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

                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 trecho

Nota : as colunas: columns.AdoptionTaskInfo.columns tem pelo menos uma coluna não definida no cabeçalho da tabela

— Stanley Okpala Nwosa
fonte
1

Engraçado, eu estava recebendo o seguinte erro por ter um quinto par a mais e ainda assim o Google me direcionou aqui. Vou deixar anotado para que as pessoas possam encontrá-lo.

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

No meu caso, eu estava atualizando a tabela de dados do lado do servidor duas vezes e isso me deu este erro. Espero que ajude alguém.

— Taian
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.