[javascript] DataTables : 정의되지 않은 속성 스타일을 읽을 수 없습니다.

Program / 글쓴이

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

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 및 응답 개체 배열이 있습니다. 문제를 디버깅하는 방법을 모르겠습니다. 어떤 제안이라도 도움이 될 것입니다 ..

답변

문제는 <th> 태그의 수가 구성 ( “columns”키가있는 배열)의 열 수와 일치해야한다는 것입니다. 지정된 열보다 <th> 태그가 적 으면 약간 암호화 된 오류 메시지가 표시됩니다.

(정답은 이미 댓글로 표시되어 있지만 답으로 반복하고 있으므로 찾기가 더 쉽기 때문에 댓글이 보이지 않습니다)

답변

가능한 원인들

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

솔루션

  • th테이블 머리글 또는 바닥 글 의 요소 수가 columns옵션에 정의 된 열 수와 일치 하는지 확인하십시오 .
  • colspan테이블 헤더에 속성 을 사용하는 경우 th각 열에 대해 적어도 두 개의 헤더 행과 하나의 고유 한 요소 가 있는지 확인하십시오 . 자세한 내용은 복잡한 헤더 를 참조하십시오.
  • columnDefs.targets옵션 을 사용하는 경우 0부터 시작하는 컬럼 인덱스가 기존 컬럼을 참조하는지 확인하십시오.

연결

자세한 내용은 jQuery DataTables : 일반적인 JavaScript 콘솔 오류-TypeError : Cannot read property ‘style’of undefined 를 참조하십시오.

답변

어떤 제안이 도움이 될 것이라고 말 했으므로 현재 내 DataTables “정의되지 않은 속성 ‘스타일’을 읽을 수 없음”문제를 해결했지만 내 문제는 기본적으로 데이터 테이블 시작 단계 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>

스 니펫 확장

참고 : columns : columns.AdoptionTaskInfo.columns에는 테이블 헤드에 정의되지 않은 열이 하나 이상 있습니다.