JQuery Datatables: Impossibile leggere la proprietà "aDataSort" di undefined

Ho creato questo violino e funziona bene secondo le mie esigenze: Fiddle

Tuttavia, quando utilizzo lo stesso nella mia applicazione, ricevo un errore nella console del browser che dice Impossibile leggere la proprietà 'aDataSort' di undefined

Nella mia applicazione, il javascript legge qualcosa come di seguito: ho controllato l'output del controller ... funziona bene ed è stampato anche sulla console.

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

    }       

})

È importante che il tuo THEAD non sia vuoto nella tabella poiché dataTable richiede di specificare il numero di colonne dei dati attesi. Secondo i tuoi dati dovrebbe essere

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

Aveva anche questo problema, questo array era fuori portata:

order: [1, 'asc'],

Per me, il bug era in DataTables stesso; Il codice per l'ordinamento in DataTables 1.10.9 non controllerà i limiti; quindi se usi qualcosa come

order: [[1, 'asc']]

con una tabella vuota, non ci sono righe idx 1 -> garantisce questa eccezione. Ciò è accaduto mentre i dati per la tabella venivano recuperati in modo asincrono. Inizialmente, durante il caricamento della pagina, dataTable viene inizializzato senza dati. Dovrebbe essere aggiornato in un secondo momento non appena vengono recuperati i dati dei risultati.

La mia soluzione:

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

Ho affrontato lo stesso problema, le seguenti modifiche hanno risolto il mio problema.

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

l' aoColumnsarray descrive la larghezza di ogni colonna e le sue sortableproprietà.

Un'altra cosa per menzionare questo errore apparirà anche quando ordini per un numero di colonna che non esiste.

Nel mio caso l'ho fatto

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

Dove avrebbe dovuto essere

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

Nota: nel mio caso ho dovuto svuotare la tabella poiché avevo i dati che volevo andassero prima di inserire nuovi dati.

Ho solo pensato di condividere dove "potrebbe" aiutare qualcuno in futuro!

Ho avuto questo problema ed era perché un altro script stava eliminando tutte le tabelle e le ricreava, ma la mia tabella non veniva ricreata. Ho passato anni su questo problema prima di notare che la mia tabella non era nemmeno visibile sulla pagina. Riesci a vedere la tua tabella prima di inizializzare DataTables?

In sostanza, l'altro script stava facendo:

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

E avrebbe dovuto fare:

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

È necessario passare da virgolette singole a virgolette [']doppie a ["]causa dell'analisi

se stai usando l' attributo data-order sulla tabella, usalo in questo mododata-order='[[1, "asc"]]'

Nel mio caso ho risolto il problema stabilendo un numero di colonna valido quando si applica la orderproprietà all'interno dello script in cui si configura la tabella dati.

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