JQuery Datatables: Tidak dapat membaca properti 'aDataSort' tidak terdefinisi

Saya membuat biola ini dan bekerja dengan baik sesuai kebutuhan saya: Biola

Namun, ketika saya menggunakan yang sama di aplikasi saya, saya mendapatkan kesalahan di konsol browser yang mengatakan Tidak dapat membaca properti 'aDataSort' dari tidak ditentukan

Dalam aplikasi saya, javascript membaca sesuatu seperti di bawah ini: Saya telah memeriksa keluaran pengontrol ... itu berfungsi dengan baik dan dicetak di konsol juga.

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

    }       

})

Penting agar THEAD Anda tidak kosong dalam tabel. Karena dataTable mengharuskan Anda menentukan jumlah kolom dari data yang diharapkan. Sesuai data Anda, seharusnya

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

Juga memiliki masalah ini, Larik ini berada di luar jangkauan:

order: [1, 'asc'],

Bagi saya, bug itu ada di DataTables itu sendiri; Kode untuk menyortir dalam DataTables 1.10.9 tidak akan memeriksa batas; jadi jika Anda menggunakan sesuatu seperti

order: [[1, 'asc']]

dengan tabel kosong, tidak ada baris idx 1 -> pengecualian ini memastikan. Ini terjadi karena data untuk tabel diambil secara asinkron. Awalnya, saat memuat halaman, dataTable diinisialisasi tanpa data. Ini harus diperbarui nanti segera setelah data hasil diambil.

Solusi saya:

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

Saya menghadapi masalah yang sama, perubahan berikut menyelesaikan masalah saya.

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

yang aoColumnsarray yang menggambarkan lebar setiap kolom dan yang sortablesifat.

Hal lain lagi kesalahan ini juga akan muncul ketika Anda memesan dengan nomor kolom yang tidak ada.

Dalam kasus saya, saya punya

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

Dimana seharusnya

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

Catatan: dalam kasus saya, saya harus mengosongkan tabel karena saya memiliki data yang saya inginkan sebelum memasukkan data baru.

Hanya berpikir untuk berbagi di mana itu "mungkin" membantu seseorang di masa depan!

Saya mengalami masalah ini dan itu karena skrip lain menghapus semua tabel dan membuatnya kembali, tetapi tabel saya tidak dibuat ulang. Saya menghabiskan waktu lama untuk masalah ini sebelum saya menyadari bahwa meja saya bahkan tidak terlihat di halaman. Dapatkah Anda melihat tabel Anda sebelum Anda menginisialisasi DataTables?

Pada dasarnya, skrip lain melakukan:

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

Dan itu seharusnya melakukan:

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

Anda perlu mengganti tanda kutip tunggal [']menjadi tanda kutip ganda["] karena parse

jika Anda menggunakan atribut data-order pada tabel maka gunakan seperti inidata-order='[[1, "asc"]]'

Dalam kasus saya, saya memecahkan masalah dengan menetapkan nomor kolom yang valid saat menerapkan orderproperti di dalam skrip tempat Anda mengonfigurasi tabel data.

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