Tables de données JQuery: impossible de lire la propriété 'aDataSort' sur undefined

J'ai créé ce violon et cela fonctionne bien selon mes exigences: Fiddle

Cependant, lorsque j'utilise la même chose dans mon application, j'obtiens une erreur dans la console du navigateur disant Impossible de lire la propriété 'aDataSort' de undefined

Dans mon application, le javascript lit quelque chose comme ci-dessous: J'ai vérifié la sortie du contrôleur ... cela fonctionne bien et est également imprimé sur la 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"
        }]
            });

    }       

})

Il est important que votre THEAD ne soit pas vide dans le tableau car dataTable vous oblige à spécifier le nombre de colonnes des données attendues. Selon vos données, il devrait être

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

Également eu ce problème, ce tableau était hors de portée:

order: [1, 'asc'],

Pour moi, le bogue était dans DataTables lui-même; Le code de tri dans DataTables 1.10.9 ne vérifiera pas les limites; donc si vous utilisez quelque chose comme

order: [[1, 'asc']]

avec une table vide, il n'y a pas de ligne idx 1 -> cette exception garantit. Cela s'est produit lorsque les données de la table étaient extraites de manière asynchrone. Initialement, lors du chargement de la page, la table dataTable est initialisée sans données. Il doit être mis à jour plus tard dès que les données de résultat sont récupérées.

Ma solution:

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

J'ai rencontré le même problème, les changements suivants ont résolu mon problème.

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

le aoColumnstableau décrit la largeur de chaque colonne et ses sortablepropriétés.

Une autre chose à mentionner cette erreur apparaîtra également lorsque vous commandez par un numéro de colonne qui n'existe pas.

Dans mon cas, j'avais

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

Où ça aurait dû être

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

Remarque: dans mon cas, j'ai dû vider la table car j'avais des données que je voulais supprimer avant d'insérer de nouvelles données.

Je pensais juste à partager là où cela «pourrait» aider quelqu'un dans le futur!

J'ai eu ce problème et c'était parce qu'un autre script supprimait toutes les tables et les recréait, mais ma table n'était pas recréée. J'ai passé des années sur ce problème avant de remarquer que mon tableau n'était même pas visible sur la page. Pouvez-vous voir votre table avant d'initialiser DataTables?

Essentiellement, l'autre script faisait:

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

Et cela aurait dû faire:

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

Vous devez remplacer les guillemets simples par des guillemets [']doubles à ["]cause de l'analyse

si vous utilisez l' attribut d' ordre des données sur la table, utilisez-le comme cecidata-order='[[1, "asc"]]'

Dans mon cas, j'ai résolu le problème en établissant un numéro de colonne valide lors de l'application de la orderpropriété à l'intérieur du script où vous configurez la table de données.

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