데이터 테이블: 정의되지 않은 속성 스타일을 읽을 수 없습니다.

데이터 테이블: 정의되지 않은 속성 스타일을 읽을 수 없습니다.

다음과 같은 오류가 발생합니다.

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.열 및 응답 개체 배열이 있습니다.무엇이 잘못되었는지 디버깅하는 방법을 잘 모르겠습니다.어떤 제안이든 도움이 될 것입니다.

문제는 ablad 태그의 수가 구성의 열 수와 일치해야 한다는 것입니다(키가 "columns"인 배열).지정된 열보다 ablish 태그가 적으면 약간 암호화되지 않은 오류 메시지가 표시됩니다.

(정답은 이미 댓글로 있지만 찾기 쉽도록 답으로 반복하고 있습니다 - 댓글을 못 봤습니다)

가능한 원인

• 의 수th표 머리글 또는 바닥글의 요소가 표 본문의 열 수 또는 옵션을 사용하여 정의된 열 수와 다릅니다.
• 속성 colspan은 다음에 사용됩니다.th테이블 헤더의 요소입니다.
• 옵션에 잘못된 열 인덱스가 지정되었습니다.

솔루션

• 다음의 수를 확인합니다.th테이블 머리글 또는 바닥글의 요소가 옵션에 정의된 열 수와 일치합니다.
• 사용하는 경우colspan테이블 헤더의 속성, 적어도 두 개의 헤더 행과 하나의 고유한 헤더 행이 있는지 확인하십시오.th각 열에 대한 요소.자세한 내용은 복합 헤더를 참조하십시오.
• 옵션을 사용하는 경우 제로 기반 열 인덱스가 기존 열을 참조하는지 확인합니다.

링크

jQuery 데이터 표 참조: 일반적인 JavaScript 콘솔 오류 - TypeError: 정의되지 않은 'style' 속성을 읽을 수 없습니다.

어떤 제안이든 도움이 될 것이라고 말씀하셨기 때문에 현재 DataTables의 "정의되지 않은 속성 'style'을 읽을 수 없음" 문제를 해결했지만 기본적으로 데이터 테이블 시작 단계에서 잘못된 인덱스를 사용하는 것이 문제였습니다.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>

모든 것이 잘 작동했습니다.

열은 의우경 이입니다.{data: columnName} 헤드보다 테이블다 많열이은음<th>Column Name</th>

입력 데이터에 다음 사항이 있는지 확인하십시오.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.열에 테이블 헤드에 정의되지 않은 열이 적어도 있습니다.

여기서의 답은 저를 올바른 길로 이끌었지만, 어느 누구도 제가 필요로 하는 완전한 답을 주지 않았습니다.사용하고 있었습니다.destroy: true데이터 테이블의 두 번째 반복에서 원래 질문에 오류가 계속 발생했습니다.

대신에, 나는 전화를 해야만 했습니다.destroy()직접적으로 방법을 사용하고 HTML의 하위 엔티티를 삭제하여 DataTables가 각 반복에서 데이터 테이블을 충돌 없이 적절하게 다시 칠하도록 합니다.<th>과 머리글로 columns:다음과 같이:

if ($.fn.DataTable.isDataTable('#results_table')) {
    $('#results_table').DataTable().destroy();
}
$('#results_table thead').empty();
$('#results_table tbody').empty();

$('#results_table').DataTable({
    data: data,
    columns: columns,
    ...etc...
});

재미있게도 나는 1/2쌍이 너무 많은데도 구글이 나를 여기로 안내했기 때문에 다음과 같은 오류를 얻었습니다.사람들이 찾을 수 있도록 적어 두겠습니다.

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)

저의 경우, 서버 측 데이터 테이블을 두 번 업데이트했는데 이 오류가 발생합니다.누군가에게 도움이 되길 바랍니다.

저는 src 속성을 https://code.jquery.com/jquery-3.5.1.min.js, 으로 교체하여 이 오류를 해결했습니다. JQuery의 슬림 버전으로 인한 문제입니다.

저도 Jquery Datatable과 같은 문제를 겪고 있었습니다.테이블 제목의 테이블 헤드(태그) 수가 테이블 본문의 태그와 동일합니다.이 문제는 "scrollX:true"라는 Databable 특성 중 하나를 제거하여 해결했습니다.그러면 저는 모든 것이 잘 됩니다.

"aoColumns": [{
               "bVisible": false, 
               "render": function ( data, type, full, meta ) 
                {},
             ]

저는 bVisible을 false로 설정하여 이 문제를 해결했습니다.또한 bVisible의 조건을 "bVisible": var1로 설정할 수 있습니다. 여기서 var1은 true 또는 false일 수 있습니다.

나는 이 문제를 설정하여 해결했습니다.bVisible~하듯이false.bVisible~하듯이"bVisible": var1서, 디에어var1수 있습니다.true또는false.

언급URL : https://stackoverflow.com/questions/39376658/datatables-cannot-read-property-style-of-undefined