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

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

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)

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.

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

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.

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

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

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

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>

                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>

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

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)

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.