DataTables: невозможно прочитать стиль свойства undefined

118

Я получаю эту ошибку со следующим:

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>

Также существуют массивы объектов columns.AdoptionTaskInfo.columns и response. Не знаю, как отлаживать, что не так. Любые предложения будут полезны.

javascript jquery node.js datatables Новобранец
источник
2
Ищите .styleв своем коде. Вы пытаетесь получить доступ к этому свойству неопределенной переменной. Оттуда можно отлаживать.
Jecoms 07
80
Проверьте, совпадает ли количество столбцов, которые вы пытаетесь получить, с количеством созданных вами <th>.
matrixguy 07
12
Несоответствие количества столбцов th с количеством столбцов, определенных в javascript, вызывающих эту проблему.
Dhanuka777

Ответы:

284

Проблема в том, что количество тегов <th> должно соответствовать количеству столбцов в конфигурации (массив с ключом «columns»). Если тегов <th> меньше, чем указано в столбцах, вы получите это слегка зашифрованное сообщение об ошибке.

(правильный ответ уже присутствует в виде комментария, но я повторяю его как ответ, чтобы его было легче найти - я не видел комментариев)

Ehrencrona
источник
2
Я хочу добавить еще один момент, может быть, люди найдут это полезным в некоторых случаях, если вы не определяете dataSrc, тогда в вашем json используйте «data», если вы используете другое имя, вы получите эту ошибку.
Ахмед Санни
Кроме того, если у вас есть столбцы, которые не видны, но включены для таких вещей, как поиск или редактор, они должны быть в конце списка столбцов: [].
Тим Дирборн
Большое спасибо, меня интересовали проблемы с javascript ..
Джимил Чокси,
24

ВОЗМОЖНЫЕ ПРИЧИНЫ

  • Количество thэлементов в верхнем или нижнем колонтитуле таблицы отличается от количества столбцов в теле таблицы или определяется с помощью columnsпараметра.
  • Атрибут colspan используется для thэлемента в заголовке таблицы.
  • В columnDefs.targetsопции указан неверный индекс столбца .

РЕШЕНИЯ

  • Убедитесь, что количество thэлементов в верхнем или нижнем колонтитуле таблицы соответствует количеству столбцов, заданных в columnsпараметре.
  • Если вы используете colspanатрибут в заголовке таблицы, убедитесь, что у вас есть как минимум две строки заголовка и один уникальный thэлемент для каждого столбца. См. Сложный заголовок для получения дополнительной информации.
  • Если вы используете columnDefs.targetsопцию, убедитесь, что индекс столбца, отсчитываемый от нуля, относится к существующим столбцам.

ССЫЛКИ

См. JQuery DataTables: Common JavaScript console errors - TypeError: Cannot read property 'style of undefined for more information.

Gyrocode.com
источник
13

Вы сказали, что любые предложения будут полезны, поэтому в настоящее время я решил мою проблему DataTables «не могу прочитать свойство 'style' of undefined», но моя проблема заключалась в использовании неправильных индексов в 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
        ]
    });
Бахадир Тасдемир
источник
Это спасло меня, спасибо. Я использую «aTargets»: [7], поэтому его путь к ошибке, Потому что там не существует столбец с индексом 7. legacy.datatables.net/usage/columns
Fudu
1
Отлично, я рад, что мой ответ
устранил
10

У меня возникла эта проблема, когда я установил 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>

Все работало нормально.

Только учусь
источник
4

Убедитесь, что в ваших входных данных response[i]и response[i][j]нет undefined/ null.

Если да, замените их на "".

Дэвид И. Самудио
источник
3

Это также может произойти при рисовании новой (другой) таблицы. Я решил это, сначала удалив предыдущую таблицу:

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

Гость
источник
2

Решение довольно простое. 

  <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>
Развернуть фрагмент

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

Стэнли Окпала Нвоса
источник
1

Как ни странно, я получал следующую ошибку из-за того, что у меня слишком много одной th / th пары, и все же 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)
Томас Гете
источник
0

В моем случае я дважды обновлял данные на стороне сервера, и это вызывало эту ошибку. Надеюсь, это кому-то поможет.

Taian
источник