DataTables: Không thể đọc kiểu thuộc tính không xác định

Tôi gặp lỗi này với những điều sau:

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

Dòng ở trên đề cập đến (hàm ẩn danh) @ VM3156: 180 là:

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

Vì vậy, tôi đoán đây là nơi nó đang thất bại.

Phần tử HTML ID tồn tại:

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

Ngoài ra, tồn tại các mảng đối tượng column.AdoptionTaskInfo.columns & response. Không chắc chắn về cách gỡ lỗi những gì sai .. Mọi đề xuất sẽ hữu ích ..

Vấn đề là số lượng thẻ <th> cần phải khớp với số cột trong cấu hình (mảng có khóa "cột"). Nếu có ít thẻ <th> hơn các cột được chỉ định, bạn sẽ nhận được thông báo lỗi hơi khó hiểu này.

(câu trả lời đúng đã được hiển thị dưới dạng nhận xét nhưng tôi đang lặp lại nó dưới dạng một câu trả lời để nó dễ tìm hơn - tôi không thấy nhận xét)

NGUYÊN NHÂN CÓ THỂ

• Số thphần tử trong đầu trang hoặc chân trang của bảng khác với số cột trong nội dung bảng hoặc được xác định bằng columnstùy chọn.
• Thuộc tính colspan được sử dụng cho thphần tử trong tiêu đề bảng.
• Chỉ mục cột không chính xác được chỉ định trong columnDefs.targetstùy chọn.

CÁC GIẢI PHÁP

• Đảm bảo rằng số thphần tử trong đầu trang hoặc chân trang của bảng khớp với số cột được xác định trong columnstùy chọn.
• Nếu bạn sử dụng colspanthuộc tính trong tiêu đề bảng, hãy đảm bảo rằng bạn có ít nhất hai hàng tiêu đề và một thphần tử duy nhất cho mỗi cột. Xem Tiêu đề phức tạp để biết thêm thông tin.
• Nếu bạn sử dụng columnDefs.targetstùy chọn, hãy đảm bảo rằng chỉ mục cột dựa trên 0 tham chiếu đến các cột hiện có.

LIÊN KẾT

Xem jQuery DataTables: Các lỗi bảng điều khiển JavaScript phổ biến - TypeError: Không thể đọc thuộc tính 'style' của undefined để biết thêm thông tin.

Bạn cho biết bất kỳ đề xuất nào sẽ hữu ích, vì vậy hiện tại tôi đã giải quyết vấn đề DataTables "không thể đọc thuộc tính 'style' của undefined" nhưng vấn đề của tôi về cơ bản là sử dụng sai chỉ mục ở columnDefsphần của giai đoạn khởi tạo bảng dữ liệu . Tôi có 9 cột và các chỉ mục là 0, 1, 2, .., 8 nhưng tôi đang sử dụng các chỉ mục cho 9 và 10 nên sau khi sửa lỗi chỉ mục sai, lỗi đã biến mất. Tôi hi vọng cái này giúp được.

Tóm lại, bạn phải xem số lượng cột và chỉ mục của mình nếu nhất quán ở mọi nơi.

Mã lỗi:

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

Mã cố định:

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

Tôi gặp sự cố này khi đặt colspanở tiêu đề bảng. Vì vậy, bảng của tôi là:

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

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

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

Sau đó, khi tôi thay đổi nó thành:

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

Mọi thứ hoạt động tốt.

Đảm bảo rằng trong dữ liệu đầu vào của bạn response[i]và response[i][j]không undefined/null .

Nếu vậy, hãy thay thế chúng bằng "".

Nó cũng có thể xảy ra khi vẽ một bảng mới (khác). Tôi đã giải quyết vấn đề này bằng cách xóa bảng trước đó:

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

Giải pháp là khá đơn giản.

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

Lưu ý : cột: cột.AdoptionTaskInfo.columns có ít nhất một cột không được xác định trong đầu bảng

Thật thú vị là tôi gặp lỗi sau vì có một cặp quá nhiều và google vẫn hướng dẫn tôi ở đây. Tôi sẽ viết nó ra để mọi người có thể tìm thấy nó.

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)

Trong trường hợp của tôi, tôi đã cập nhật dữ liệu phía máy chủ hai lần và nó gây ra cho tôi lỗi này. Hy vọng nó sẽ giúp một ai đó.