javascript - JQuery Datatables: No se puede leer la propiedad ''aDataSort'' de undefined

jquery-datatables

Question

Creé este violín y funciona bien según mis requisitos: Fiddle

Sin embargo, cuando uso lo mismo en mi aplicación , aparece un error en la consola del navegador que dice No se puede leer la propiedad ''aDataSort'' de undefined

En mi aplicación, el javascript dice algo como lo siguiente: he comprobado la salida del controlador ... funciona bien y también está impreso en la consola.

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

Answer 1

En mi caso tuve

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

Donde debería haber estado

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

Nota: en mi caso tuve que vaciar la tabla ya que tenía datos que quería eliminar antes de insertar nuevos datos.

¡Solo pensé en compartir dónde "podría" ayudar a alguien en el futuro!

Answer 2

Es importante que su THEAD no esté vacío en la tabla. Como dataTable requiere que especifique el número de columnas de los datos esperados. Según sus datos, debería ser

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

Answer 3

Para mí, el error estaba en DataTables en sí mismo; El código para ordenar en DataTables 1.10.9 no verificará los límites; así, si usas algo como

order: [[1, ''asc'']]

con una tabla vacía, no hay fila idx 1 -> asegura esta excepción. Esto sucedió cuando los datos de la tabla se obtenían de forma asincrónica. Inicialmente, en la página de carga, la tabla de datos se inicializa sin datos. Debería actualizarse más tarde tan pronto como se obtengan los datos de resultados.

Mi solución:

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

Answer 4

También tengo este problema, los siguientes cambios resolvieron mi 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
} );
} );

La matriz aoColumns describe el ancho de cada columna y sus propiedades sortable .

Answer 5

También tuve este problema, esta matriz estaba fuera de rango:

order: [1, ''asc''],

Answer 6

Tuve este problema y fue porque otro script estaba borrando todas las tablas y volviéndolas a crear, pero mi tabla no se estaba recreando. Pasé años en este tema antes de notar que mi tabla ni siquiera era visible en la página. ¿Puedes ver tu tabla antes de inicializar DataTables?

Esencialmente, el otro script estaba haciendo:

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

Y debería haber estado haciendo:

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