CODEWITHSUNDEEP
javascriptjquerydatatables
swateek
swateek

Reputation: 7570

JQuery Datatables : Cannot read property 'aDataSort' of undefined

I created this fiddle to and it works well as per my requirements: Fiddle

However, when I use the same in my application I get an error in the browser console saying Cannot read property 'aDataSort' of undefined

In my application, the javascript reads something like as below: I have checked the controller output...it works well and is printed on the console too.

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

    }       

})

Upvotes: 130

Views: 267594

Answers (16)

John Foll
John Foll

Reputation: 156

I was getting from DataTables.min.js this error: "Uncaught TypeError: Cannot read properties of undefined (reading 'call')" when I did (modified from what I did):

$(document).ready(function () {
            var table = $('#MySelector').DataTable({
                columnDefs: [{ target: 0, width: "55%", type: "string", className: "dt-left" },
                             { target: 1, width: "10%", type: "datetime-moment", className: "dt-left" },
                             { target: 2, width: "10%", type: 
                             { target: 3, width: "0", className: "dt-left", visible: false } ],
                order: [[0, 'asc']], autoWidth: false, bFilter: true, scrollCollapse: false, paging: false, bInfo: true, ordering: true 
                /*,stateSave: false*/
            });

           table.rows().every(function (e) { });
}

But for me the problem got fixed when I instead did this:

table.rows().every(function (rowIdx, tableLoop, rowLoop) {

});

Now according to DataTables.net both are supposed to be valid - but only the second example for me doesn't blow up: https://datatables.net/reference/api/rows().every()

Upvotes: 0

Juanjo Martinez
Juanjo Martinez

Reputation: 776

Just my two cents regarding order: [...]; It won't check items type, and in my case I was passing [arrOrders] as opposed to just arrOrders or [...arrOrders], resulting in [[[ 1, "desc" ], [ 2, "desc" ]]].

Upvotes: 2

Vishal
Vishal

Reputation: 11

I got the same error, In my case one of the columns was not receiving proper data. some of the columns had strings in place of Integers. after i fixed it it started working properly. In most of the cases the issue is "table not receiveing proper data".

Upvotes: 0

Jason Holden
Jason Holden

Reputation: 167

Old question, but in my case I was passing an unrelated order= in the URL that would sometimes be empty. Once I changed the url variable to "sortorder" or anything other than "order" the plugin began working normally.

Upvotes: 0

mercury
mercury

Reputation: 2755

For me adding columns in this format

columns: [
    { data: 'name' },
    { data: 'position' },
    { data: 'salary' },
    { data: 'state_date' },
    { data: 'office' },
    { data: 'extn' }
]

and ajax at this format

 ajax: {
  url: '/api/foo',
  dataSrc: ''
},

solved for me .

Upvotes: 1

Joukhar
Joukhar

Reputation: 872

My Solution

add this :

order: 1 ,

Upvotes: 3

WaqarTahir
WaqarTahir

Reputation: 149

Most of the time it occurs when something is undefined. I copied the code and removed few columns which disturbed the order by index. Carefully make changes and every variable after it. "order": [[1, "desc"]], fixed my issues previous i was using "order": [[24, "desc"]], and that index was not avaialble.

Upvotes: 3

Marston
Marston

Reputation: 121

I got the error by having multiple tables on the page and trying to initialize them all at once like this:

$('table').DataTable();

After a lot of trial and error, I initialized them separately and the error went away:

$("#table1-id").DataTable();
$("#table2-id").DataTable();

Upvotes: 2

user13755332
user13755332

Reputation: 51

In my case I solved the problem by establishing a valid column number when applying the order property inside the script where you configure the data table.

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

Upvotes: 4

MohitGhodasara
MohitGhodasara

Reputation: 2732

You need to switch single quotes ['] to double quotes ["] because of parse

if you are using data-order attribute on the table then use it like this data-order='[[1, "asc"]]'

Upvotes: 4

Abdul Manan
Abdul Manan

Reputation: 2375

I faced the same problem, the following changes solved my problem.

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

the aoColumns array describes the width of each column and its sortable properties.

Another thing to mention this error will also appear when you order by a column number that does not exist.

Upvotes: 8

Ryan Shillington
Ryan Shillington

Reputation: 25097

I had this problem and it was because another script was deleting all of the tables and recreating them, but my table wasn't being recreated. I spent ages on this issue before I noticed that my table wasn't even visible on the page. Can you see your table before you initialize DataTables?

Essentially, the other script was doing:

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

And it should have been doing:

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

Upvotes: 2

JumpingElephant
JumpingElephant

Reputation: 161

In my case I had 

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

Where it should have been 

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

Note: in my case I had to empty the table since i had data that I wanted gone before inserting new data.

Just thought of sharing where it "might" help someone in the future!

Upvotes: 6

Oliver Zendel
Oliver Zendel

Reputation: 2901

For me, the bug was in DataTables itself; The code for sorting in DataTables 1.10.9 will not check for bounds; thus if you use something like

order: [[1, 'asc']]

with an empty table, there is no row idx 1 -> this exception ensures. This happened as the data for the table was being fetched asynchronously. Initially, on page loading the dataTable gets initialized without data. It should be updated later as soon as the result data is fetched.

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

Upvotes: 15

hogarth45
hogarth45

Reputation: 3657

Also had this issue, This array was out of range:

order: [1, 'asc'],

Upvotes: 97

Gkrish
Gkrish

Reputation: 1881

It's important that your THEAD not be empty in table.As dataTable requires you to specify the number of columns of the expected data . As per your data it should be

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

Upvotes: 171

Related Questions