DataTables 오류 해결 방법

wheezy·2022년 2월 15일
0

JavaScript_DataTables

목록 보기
4/8

parameter 값이 null 일 때

컬럼은 있는데 data가 null이여서 아래와 같은 오류가 발생하였다.
그래서 테이블에 null의 개수만큼 alert창이 떠 화면 확인이 어려웠다 😐

DataTables warning: table id=manageMaterialTbl1 - 
Requested unknown parameter 'null' for row 0, column 7. 
For more information about this error, please see http://datatables.net/tn/4


아마도 DataTables 옵션 중 columns의 부분인 것 같다.
아래를 보면 null 값이 두개가 있다.

    columns: [
            {"data": "name"}, // 이름
            {"data": "age"}, // 나이
            {"data": "city"}, // 도시
            {"data": "null"}, 
            {"data": "family"}, // 가족
            {"data": "corporation"}, // 회사
             {"data": "null"}
        ],

만약 첫번째 null 값에 기능을 넣어준다면 오류가 뜨지 않을 것이다.

 {
                "targets": 3 
                "data": null,
                "render": function (data, type, row, meta) {
                    return '<a href="javascript:void(0);"token operator">+ meta.row + '\');">' + '상세 확인' + '</a>';
                },
            },

하지만 두번째 null에는 단순 data를 불러오는 값을 넣어준다면 오류가 뜰 것이다.
parameter는 지정하였지만 null 값이기 때문에 오류가 생기는 것 같다.
아래와 같이 추가해주면 오류는 해결된다 �

columnDefs: [{
    "defaultContent": "-",
    "targets": "_all"
  }]

DataTables 초기화 오류

DataTable을 아래와 같이 만들어주고 destroy()를 사용했으면 문제가 없었을 것이다.

	if ( $.fn.DataTable.isDataTable( '#modalTbl' ) ) {
        $('#modalTbl').DataTable().destroy();
    }

	function example() {
    	let table = $('#modalTbl').DataTable({
        ...})
    }

하지만 나는 아래와 같이 작성하여 문제가 발생했다.

   if ( $.fn.DataTable.isDataTable( '#modalTbl' ) ) {
        $('#modalTbl').DataTable().destroy();
    }

	function example() {
    	let table = $('#modalTbl').DataTable({
        ...})
    }
                                                 
    let modal = $('#modalTbl').DataTable();
DataTables warning: table id=materialModalTbl -Cannot reinitialise DataTable. 
For more information about this error, please see http://datatables.net/tn/3

위의 같은 초기화 오류가 났을 때 아래와 같이 "destroy": true 만 추가해주면 오류가 해결된다.

function example() {
    let table = $('#modalTbl').DataTable({
        "destroy": true
         ...})
      }

참고

https://stackoverflow.com/questions/16539578/datatables-warning-requested-unknown-parameter-0-from-the-data-source-for-row

https://datatables.net/manual/tech-notes/3

profile
🧀 개발을 하면서 도움이 되었던 부분을 기록하는 공간입니다 🧀

0개의 댓글