JQuery Datatables: Não é possível ler a propriedade 'aDataSort' de indefinido

Eu criei este fiddle para e ele funciona bem de acordo com meus requisitos: Fiddle

No entanto, quando eu uso o mesmo em meu aplicativo, recebo um erro no console do navegador dizendo Não é possível ler a propriedade 'aDataSort' de undefined

No meu aplicativo, o javascript é mais ou menos assim: Eu verifiquei a saída do controlador ... funciona bem e está impresso no console também.

$(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 que seu THEAD não esteja vazio na tabela. Como dataTable, você deve especificar o número de colunas dos dados esperados. De acordo com seus dados, deve 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>

Também tive este problema, esta matriz estava fora do intervalo:

order: [1, 'asc'],

Para mim, o bug estava no próprio DataTables; O código para classificação em DataTables 1.10.9 não verificará os limites; portanto, se você usar algo como

order: [[1, 'asc']]

com uma tabela vazia, não há linha idx 1 -> esta exceção garante. Isso aconteceu porque os dados da tabela estavam sendo buscados de forma assíncrona. Inicialmente, no carregamento da página, a dataTable é inicializada sem dados. Ele deve ser atualizado posteriormente, assim que os dados do resultado forem obtidos.

Minha solução:

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

Eu enfrentei o mesmo problema, as seguintes mudanças resolveram meu 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
    } );
} );

a aoColumnsmatriz descreve a largura de cada coluna e suas sortablepropriedades.

Outra coisa para mencionar esse erro também aparecerá quando você ordenar por um número de coluna que não existe.

No meu caso eu tive

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

Onde deveria estar

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

Nota: no meu caso tive que esvaziar a tabela porque tinha os dados que queria antes de inserir novos dados.

Pensei em compartilhar onde "pode" ajudar alguém no futuro!

Eu tive esse problema porque outro script estava excluindo todas as tabelas e as recriando, mas minha tabela não estava sendo recriada. Passei muito tempo pensando nesse assunto antes de perceber que minha mesa nem mesmo estava visível na página. Você pode ver sua tabela antes de inicializar DataTables?

Essencialmente, o outro script estava fazendo:

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 deveria estar fazendo:

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

Você precisa mudar as aspas simples [']para aspas duplas ["]por causa da análise

se você estiver usando o atributo data-order na tabela, use-o assimdata-order='[[1, "asc"]]'

No meu caso resolvi o problema estabelecendo um número de coluna válido ao aplicar a orderpropriedade dentro do script onde você configura a tabela de dados.

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