JQuery Datatables: nie można odczytać właściwości „aDataSort” wartości undefined

Stworzyłem to skrzypce i działa zgodnie z moimi wymaganiami: Fiddle

Jednak gdy używam tego samego w mojej aplikacji, pojawia się błąd w konsoli przeglądarki z informacją, że nie można odczytać właściwości „aDataSort” wartości undefined

W mojej aplikacji javascript czyta coś takiego jak poniżej: sprawdziłem wyjście kontrolera ... działa dobrze i jest również drukowane na konsoli.

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

    }       

})

Ważne jest, aby Twoja THEAD nie była pusta w tabeli, ponieważ dataTable wymaga określenia liczby kolumn oczekiwanych danych. Zgodnie z Twoimi danymi powinno być

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

Wystąpił również ten problem, ta tablica była poza zakresem:

order: [1, 'asc'],

U mnie błąd był w samym DataTables; Kod do sortowania w DataTables 1.10.9 nie będzie sprawdzał granic; więc jeśli używasz czegoś takiego jak

order: [[1, 'asc']]

z pustą tabelą nie ma wiersza idx 1 -> ten wyjątek zapewnia. Stało się tak, ponieważ dane tabeli były pobierane asynchronicznie. Początkowo podczas ładowania strony dataTable jest inicjowana bez danych. Powinien zostać zaktualizowany później, gdy tylko zostaną pobrane dane wyników.

Moje rozwiązanie:

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

Napotkałem ten sam problem, następujące zmiany rozwiązały mój problem.

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

aoColumnstablica określa szerokość każdej kolumny i jej sortablewłaściwości.

Kolejna rzecz, o której należy wspomnieć o tym błędzie, pojawi się również podczas zamawiania według numeru kolumny, która nie istnieje.

W moim przypadku miałem

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

Gdzie to powinno być

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

Uwaga: w moim przypadku musiałem opróżnić tabelę, ponieważ przed wstawieniem nowych danych miałem dane, które chciałem usunąć.

Pomyślałem tylko o udostępnieniu tego, gdzie „może” to komuś pomóc w przyszłości!

Miałem ten problem, ponieważ inny skrypt usuwał wszystkie tabele i odtwarzał je, ale moja tabela nie była odtwarzana. Spędziłem wieki nad tym problemem, zanim zauważyłem, że mój stół nie był nawet widoczny na stronie. Czy widzisz swoją tabelę przed zainicjowaniem DataTables?

Zasadniczo inny skrypt robił:

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

I powinien był zrobić:

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

Musisz zamienić pojedyncze cudzysłowy [']na podwójne cudzysłowy z ["]powodu analizy

jeśli używasz atrybutu kolejności danych w tabeli, użyj go w ten sposóbdata-order='[[1, "asc"]]'

W moim przypadku rozwiązałem problem, ustalając prawidłowy numer kolumny podczas stosowania orderwłaściwości wewnątrz skryptu, w którym konfigurujesz tabelę danych.

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