JQuery Datatables: Không thể đọc thuộc tính 'aDataSort' của undefined

Tôi tạo ra fiddle này để và nó hoạt động tốt theo yêu cầu của tôi: Fiddle

Tuy nhiên, khi tôi sử dụng cùng một trong ứng dụng của mình, tôi gặp lỗi trong bảng điều khiển trình duyệt nói Không thể đọc thuộc tính 'aDataSort' của không xác định

Trong ứng dụng của tôi, javascript đọc một thứ như dưới đây: Tôi đã kiểm tra đầu ra của bộ điều khiển ... nó hoạt động tốt và cũng được in trên bảng điều khiển.

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

    }       

})

Điều quan trọng là THEAD của bạn không được để trống trong bảng vì dataTable yêu cầu bạn chỉ định số cột của dữ liệu mong đợi. Theo dữ liệu của bạn, nó phải

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

Cũng có vấn đề này, Mảng này nằm ngoài phạm vi:

order: [1, 'asc'],

Đối với tôi, lỗi nằm trong chính DataTables; Mã sắp xếp trong DataTables 1.10.9 sẽ không kiểm tra giới hạn; do đó nếu bạn sử dụng một cái gì đó như

order: [[1, 'asc']]

với một bảng trống, không có hàng idx 1 -> điều này đảm bảo ngoại lệ. Điều này đã xảy ra vì dữ liệu cho bảng đang được tìm nạp không đồng bộ. Ban đầu, khi tải trang, dataTable được khởi tạo mà không có dữ liệu. Nó sẽ được cập nhật sau đó ngay khi dữ liệu kết quả được tìm nạp.

Giải pháp của tôi:

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

Tôi gặp phải vấn đề tương tự, những thay đổi sau đây đã giải quyết được vấn đề của tôi.

$(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
    } );
} );

các aoColumnsmảng mô tả chiều rộng của mỗi cột và nó sortablethuộc tính.

Một điều khác cần đề cập là lỗi này cũng sẽ xuất hiện khi bạn đặt hàng theo số cột không tồn tại.

Trong trường hợp của tôi, tôi đã có

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

Nơi đáng lẽ nó phải ở

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

Lưu ý: trong trường hợp của tôi, tôi phải làm trống bảng vì tôi có dữ liệu mà tôi muốn đã bị xóa trước khi chèn dữ liệu mới.

Chỉ nghĩ đến việc chia sẻ nơi nó "có thể" giúp đỡ ai đó trong tương lai!

Tôi gặp sự cố này là do một tập lệnh khác đang xóa tất cả các bảng và tạo lại chúng, nhưng bảng của tôi không được tạo lại. Tôi đã dành nhiều thời gian cho vấn đề này trước khi nhận thấy rằng bảng của tôi thậm chí không hiển thị trên trang. Bạn có thể xem bảng của mình trước khi khởi tạo DataTables không?

Về cơ bản, tập lệnh khác đã làm:

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

Và lẽ ra nó phải làm:

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

Bạn cần chuyển dấu ngoặc kép [']thành dấu ngoặc kép ["]do phân tích cú pháp

nếu bạn đang sử dụng thuộc tính thứ tự dữ liệu trên bảng thì hãy sử dụng nó như thế nàydata-order='[[1, "asc"]]'

Trong trường hợp của tôi, tôi đã giải quyết vấn đề bằng cách thiết lập số cột hợp lệ khi áp dụng thuộc ordertính bên trong tập lệnh nơi bạn định cấu hình bảng dữ liệu.

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