DataTables: Неможливо прочитати стиль властивості невизначеного

Я отримую цю помилку із наступним:

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

Рядок вище, що посилається на (анонімна функція) @ VM3156: 180, є:

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

Тож я здогадуюсь, що це там, де вона провалюється.

Елемент HTML ID існує:

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

Також існують масиви столбцов.AdoptionTaskInfo. Column & response object. Не знаєте, як налагодити що не так .. Будь-які пропозиції будуть корисними ..

Проблема полягає в тому, що кількість тегів <th> повинна відповідати кількості стовпців у конфігурації (масив з клавішею "стовпці"). Якщо менше <th> тегів, ніж вказані стовпці, ви отримуєте це злегка криптичне повідомлення про помилку.

(правильна відповідь вже є коментарем, але я повторюю це як відповідь, тому простіше знайти - я не бачив коментарів)

МОЖЛИВІ ПРИЧИНИ

• Кількість thелементів у заголовку або колонтитулі таблиці відрізняється від кількості стовпців у тілі таблиці або визначених за допомогою columnsпараметра.
• Атрибут colspan використовується для thелемента в заголовку таблиці.
• Неправильний індекс стовпця, вказаний у columnDefs.targetsопції.

РІШЕННЯ

• Переконайтесь, що кількість thелементів у заголовку та нижньому колонтитулі таблиці відповідає кількості стовпців, визначених у columnsпараметрі.
• Якщо ви використовуєте colspanатрибут у заголовку таблиці, переконайтеся, що у вас є принаймні два рядки заголовка та один унікальний thелемент для кожного стовпця. Див. Складний заголовок для отримання додаткової інформації.
• Якщо ви використовуєте columnDefs.targetsопцію, переконайтеся, що індекс стовпців на основі нуля відноситься до існуючих стовпців.

ПОСИЛАННЯ

Див. JQuery DataTables: Поширені помилки консолі JavaScript - TypeError: Неможливо прочитати "стиль" властивості невизначеного для отримання додаткової інформації.

Ви сказали, що будь-які пропозиції можуть бути корисними, тому в даний час я вирішив свою таблицю даних "не можу читати властивість" стиль "невизначеної" проблеми, але моя проблема в основному використовувала неправильні індекси в columnDefsрозділі фази ініціації таблиці даних . Я отримав 9 стовпців, а індекси 0, 1, 2, .., 8, але я використовував індекси для 9 і 10, тому після виправлення неправильної проблеми з індексом помилка зникла. Я сподіваюся, що це допомагає.

Коротше кажучи, ви повинні дивитись кількість своїх стовпців та індекси, якщо вони скрізь узгоджуються.

Код баггі:

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

Фіксований код:

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

У мене виникла ця проблема, коли я встановлював colspanу заголовку таблиці. Тож мій стіл був:

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

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

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

Тоді як тільки я зміню його на:

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

Все працювало просто чудово.

Переконайтеся, що у своїх вхідних даних, response[i]і response[i][j], немає undefined/ null.

Якщо так, замініть їх на "".

Це може статися і під час складання нової (іншої) таблиці. Я вирішив це, попередньо видаливши попередню таблицю:

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

Рішення досить просте.

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

Примітка : стовпці: столбцы.AdoptionTaskInfo.колонки містить принаймні стовпець, не визначений у заголовку таблиці

Смішно, я отримував таку помилку за те, що одна-та пара забагато, і Google все ще мене спрямував сюди. Я залишу його записаним, щоб люди могли його знайти.

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)

У моєму випадку я двічі оновлював серверні дані, і це дає мені цю помилку. Сподіваюся, це комусь допоможе.