jQuery Datatables: Uncaught TypeError: Cannot read property 'asSorting' of undefined

Question

I'm am new in jQuery, so sorry if my question is too simple.

I am trying to do something like this:

$("#send-one").html('done. ');

var tableProgress= $("<table id='table-progress'><tr><td></td></tr></table>");

$("#send-one").empty().append(tableProgress);

tableProgress.dataTable({
    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": true,
    "bSort": false,
    "bInfo": false,
    "bAutoWidth": false
});

All this occurs inside jQuery ui Dialog Box.

It does not work, I think it's because .dataTable() pluggin can't find the table so I am trying to use jQuery $.when.

The error is this

Uncaught TypeError: Cannot read property 'asSorting' of undefined

What I need is: use .datatable pluggin in a table that is inserted in $("#send-one").html('done. ' + tableProgress) but, using .datatable() directly may not be synchronous to the insertion.

I also tried:

$("#send-one").html('done. ' + tableProgress);
$('#table-progress').dataTable();

Doesn't look like you're using Deferred objects, which is pretty much required for this. What are you trying to accomplish? — Dominic Barnes
– Dominic Barnes, Commented Jun 26, 2013 at 13:51
Maybe you should explain what you want to achieve, instead of letting us guess based on your not-working code. — GolezTrol
– GolezTrol, Commented Jun 26, 2013 at 13:51
I had such issue when used outdated version of Datatable. Upgrading to 1.10.5 solved my problem. — Serhii Holinei
– Serhii Holinei, Commented Mar 10, 2015 at 11:45

Community · Accepted Answer · 2017-05-23 10:31:07Z

38

This other stack overflow question had a much clearer answer, that it must have a <thead> and a <tbody> to work: Jquery datatable integration error?

Your's is missing both.

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Aug 26, 2013 at 20:55

David Hobs

4,5312 gold badges24 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Amal Over a year ago

Just a note: You dont need a <tbody> and <thead> in case you supply columns via init script

Uder Moreira · Accepted Answer · 2013-06-27 19:43:57Z

8

I did this and it works. apparently some problem with aoSorting of datatables. I don't know why.

$("#send-one").html('done. ');

var tableProgress= $("<table id='table-progress'><tr><th></th></tr><tr><td></td></tr></table>");

$("#send-one").empty().append(tableProgress);

tableProgress.dataTable( {
    "aoColumns": [
          null
        ]
});

answered Jun 27, 2013 at 19:43

Uder Moreira

9526 gold badges17 silver badges33 bronze badges

Comments

Ozgur Dogan · Accepted Answer · 2015-08-04 20:33:10Z

1

If you are using dataTable columnFilter plugin, this one solved my problem.

Just change _fnColumnIndex like this:

function _fnColumnIndex(iColumnIndex) {
        return iColumnIndex;
}

answered Aug 4, 2015 at 20:33

Ozgur Dogan

516 bronze badges

Comments

Patrick Evans · Accepted Answer · 2013-06-26 14:03:38Z

0

function someAction() {
            var tableProgress;
            tableProgress = $("<table id='table-progress'><tr><td></td></tr></table>");
            $("#send-one").append(tableProgress);
            tableProgress.dataTable();                                       
}

adds the table to #send-one, on document ready, and then calls the dataTable on it. No sense using the id since you can just have it already in an jQuery object.

edited Jun 26, 2013 at 14:03

answered Jun 26, 2013 at 13:58

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

5 Comments

Uder Moreira Over a year ago

It has document ready, but #table-progress does not exists at the beginning.. only after some user interaction..

Patrick Evans Over a year ago

yea updated my answer. You could just put the table code into a jQuery object, and add it to the document and then call dataTable on it.

Uder Moreira Over a year ago

it does not work.. =( Uncaught TypeError: Object <table id='table-progress'>........</table> has no method 'dataTable'

Patrick Evans Over a year ago

then your dataTable plugin isnt loaded yet, you are executing that code before it has time to load.

Uder Moreira Over a year ago

it is loaded. I have a table that is cell is clickable and then open an dialog box (from jquery ui) Than I do what is above...

Atrox111 · Accepted Answer · 2013-06-26 14:05:54Z

0

You do not call any asynchronous function (such as some AJAX calls) so the $.when function doesn't make sense here.

As you use functions which will be called after the last one has completed the following code should work.

var tableProgress;
tableProgress = "<table id='table-progress'><tr><td></td></tr></table>";
$("#send-one").html('done. ' + tableProgress);
$('#table-progress').dataTable();

edited Jun 26, 2013 at 14:05

answered Jun 26, 2013 at 13:58

Atrox111

5274 silver badges17 bronze badges

2 Comments

Uder Moreira Over a year ago

#table-progress does not exist when document ready... it starts to exist after a file upload...

Uder Moreira Over a year ago

I did it at first.. but it does not work. So I think about $.when... what do I suppose to test?

mkutyba · Accepted Answer · 2013-06-26 16:20:19Z

0

Make sure you load the plugin .js file correctly.

http://jsfiddle.net/CdRa5/6/

var tableProgress = $('<table id="table-progress"><thead><tr><th>heading</th><th>heading</th></tr></thead><tbody><tr><td>cell</td><td>cell</td></tr><tr><td>cell</td><td>cell</td></tr></tbody></table>');
$("#send-one").empty().append(tableProgress);
tableProgress.dataTable();

answered Jun 26, 2013 at 16:20

mkutyba

1,4271 gold badge10 silver badges26 bronze badges

2 Comments

Uder Moreira Over a year ago

Thank you matty, but did not work... still same error.. it is inside a dialog box of jquery ui... could this be the error?

mkutyba Over a year ago

try changing third line to select the DOM node again: $('#table-progress').dataTable(); And don't forget about correct table structure, this plugin doesn't work on table without headings.

Collectives™ on Stack Overflow

jQuery Datatables: Uncaught TypeError: Cannot read property 'asSorting' of undefined

6 Answers 6

1 Comment

Comments

Comments

5 Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

5 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related