DataTables: Не удается прочитать стиль свойства undefined

Ответ 1

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

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

Ответ 2

Вы сказали, что любые предложения будут полезны, поэтому в настоящее время я решил, что мои DataTables "не могут прочитать свойство" стиль "проблемы undefined", но моя проблема заключалась в основном с использованием неправильных индексов на этапе

Короче говоря, вы должны следить за количеством и индексами столбцов, если они согласованы везде.

Код ошибки:

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

Ответ 3

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

Если это так, замените их на "".

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

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

Ответ 8

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

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

РЕШЕНИЯ

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

ССЫЛКИ

Смотрите jQuery DataTables: Типичные ошибки консоли JavaScript - TypeError: Невозможно прочитать стиль свойства undefined для получения дополнительной информации.