web-dev-qa-db-fra.com

JQuery Datatables: Impossible de lire la propriété 'aDataSort' de non définie

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

Cependant, lorsque j'utilise la même chose dans mon application, une erreur s'est produite dans la console du navigateur en disant Impossible de lire la propriété 'aDataSort' de non définie

Dans mon application, le javascript se lit comme suit: 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"
        }]
            });

    }       

})
javascriptjqueryjquery-datatables
69
swateek

Il est important que votre THEAD ne soit pas vide dans la table. 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>
103
Gkrish

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

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

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 alors que les données de la table étaient extraites de manière asynchrone. Initialement, lors du chargement de la page, le dataTable est initialisé sans données. Il devrait ê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;
6
Oliver Zendel

Dans mon cas j'avais

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

Où cela aurait dû être

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

Remarque: dans mon cas, je devais vider la table car j'avais les données que je voulais partir avant d'insérer de nouvelles données.

Je viens de penser à partager où cela "pourrait" aider quelqu'un à l'avenir!

4
JumpingElephant

J'ai eu ce problème et c'est parce qu'un autre script supprimait toutes les tables et les recréait, mais ma table n'était pas recréée. J'ai passé beaucoup de temps sur cette question 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û être fait:

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

j'ai aussi ce problème, les modifications suivantes 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 tableau aoColumns décrit la largeur de chaque colonne et ses propriétés sortable.

1
Abdul Manan