JQuery Datatables : 정의되지 않은 'aDataSort'속성을 읽을 수 없습니다.

나는이 바이올린을 만들고 내 요구 사항에 따라 잘 작동 : 바이올린을

그러나 내 응용 프로그램에서 동일한 것을 사용할 때 브라우저 콘솔에서 Cannot read property 'aDataSort'of undefined 라는 오류가 발생합니다.

내 응용 프로그램에서 자바 스크립트는 다음과 같이 읽습니다. 컨트롤러 출력을 확인했습니다 ... 잘 작동하며 콘솔에도 인쇄됩니다.

$(document).ready(function() {

    $.getJSON("three.htm", function(data) {
             // console.log("loadDataTable >>  "+JSON.stringify(data));
             })
             .fail(function( jqxhr, textStatus, error ) {
             var err = textStatus + ', ' + error;
             alert(err);
             console.log( "Request Failed: " + err);
             })
             .success(function(data){
                 loadDataTable(data);
             });

    function loadDataTable(data){
         $("#recentSubscribers").dataTable().fnDestroy();    
         var oTable = $('#recentSubscribers').dataTable({
             "aaData" : JSON.parse(data.subscribers),
             "processing": true,
            "bPaginate": false,
            "bFilter": false,
            "bSort": false,
            "bInfo": false,
            "aoColumnDefs": [{
            "sTitle": "Subscriber ID",
            "aTargets": [0]
        }, {
            "sTitle": "Install Location",
            "aTargets": [1]
        }, {
            "sTitle": "Subscriber Name",
            "aTargets": [2]
        }, {
            "aTargets": [0], 
            "mRender": function (data, type, full) {
                return '<a style="text-decoration:none;" href="#" class="abc">' + data + '</a>';
            }
        }],
            "aoColumns": [{
            "mData": "code"
        }, {
            "mData": "acctNum"
        }, {
            "mData": "name"
        }]
            });

    }       

})

테이블에서 THEAD가 비어 있지 않아야합니다. dataTable에서는 예상 데이터의 열 수를 지정해야합니다. 귀하의 데이터에 따라

<table id="datatable">
    <thead>
        <tr>
            <th>Subscriber ID</th>
            <th>Install Location</th>
            <th>Subscriber Name</th>
            <th>some data</th>
        </tr>
    </thead>
</table>

또한이 문제가 발생했습니다.이 배열은 범위를 벗어났습니다.

order: [1, 'asc'],

저에게 버그는 DataTables 자체에있었습니다. DataTables 1.10.9의 정렬 코드는 경계를 확인하지 않습니다. 따라서 다음과 같은 것을 사용하면

order: [[1, 'asc']]

빈 테이블에서는 행 idx 1이 없습니다.->이 예외가 보장합니다. 이것은 테이블에 대한 데이터를 비동기 적으로 가져 오기 때문에 발생했습니다. 처음에는 페이지로드시 dataTable이 데이터없이 초기화됩니다. 결과 데이터를 가져 오는 즉시 업데이트해야합니다.

내 솔루션 :

// add within function _fnStringToCss( s ) in datatables.js
// directly after this line
// srcCol = nestedSort[i][0];

if(srcCol >= aoColumns.length) {
    continue;
}

// this line follows:
// aDataSort = aoColumns[ srcCol ].aDataSort;

나는 같은 문제에 직면했고 다음과 같은 변화로 문제가 해결되었습니다.

$(document).ready(function() {
     $('.datatable').dataTable( {
            bSort: false,
            aoColumns: [ { sWidth: "45%" }, { sWidth: "45%" }, { sWidth: "10%", bSearchable: false, bSortable: false } ],
        "scrollY":        "200px",
        "scrollCollapse": true,
        "info":           true,
        "paging":         true
    } );
} );

aoColumns어레이는 각 컬럼과의 폭 설명 sortable특성.

이 오류를 언급하는 또 다른 사항은 존재하지 않는 열 번호로 주문할 때도 나타납니다.

내 경우에는

$(`#my_table`).empty();

어디에 있었어야 했어

$(`#my_table tbody`).empty();

참고 : 제 경우에는 새 데이터를 삽입하기 전에 원하는 데이터가 있었기 때문에 테이블을 비워야했습니다.

미래에 누군가에게 도움이 될 수있는 곳을 공유하는 것을 생각했습니다!

나는이 문제가 있었고 다른 스크립트가 모든 테이블을 삭제하고 다시 생성했기 때문에 테이블이 다시 생성되지 않았습니다. 내 테이블이 페이지에 표시되지 않는다는 것을 알기 전에이 문제에 대해 오랜 시간을 보냈습니다. DataTable을 초기화하기 전에 테이블을 볼 수 있습니까?

기본적으로 다른 스크립트는 다음을 수행했습니다.

let tables = $("table");
for (let i = 0; i < tables.length; i++) {
  const table = tables[i];
  if ($.fn.DataTable.isDataTable(table)) {
    $(table).DataTable().destroy(remove);
    $(table).empty();
  }
}

그리고 그랬어 야했습니다.

let tables = $("table.some-class-only");
... the rest ...

구문 분석 때문에 작은 따옴표 [']를 큰 따옴표 로 전환해야합니다.["]

당신이 사용하는 경우 데이터 주문 테이블에 속성을 다음과 같이 사용data-order='[[1, "asc"]]'

제 경우 order에는 데이터 테이블을 구성하는 스크립트 내부에 속성을 적용 할 때 유효한 열 번호를 설정하여 문제를 해결했습니다 .

var table = $('#mytable').DataTable({
     .
     .
     .
     order: [[ 1, "desc" ]],