Cannot read property 'asSorting'

ldferrell

I use DataTables in several pages of my app. I am trying to initialize another but keep getting
'TypeError: Cannot read property 'asSorting' of undefined'. The table is well-formed with used in thead
and is no different than any other table in the app as far as I can see. What should I look for?

Thanks in advance.

allan

This can occur when the settings object is lost for the DataTable for whatever reason. DataTables passes around a settings object, and in this case it sounds like it is just passing around an undefined parameter. The question is why... If you can link to your app that would be very useful.

Allan

airandfingers

Any update on this issue? I'm having the exact same problem, and my code is as simple as can be:

HTML:
[code]

Device Status

...


[/code]

jQuery:
[code]
$('#device_status').children('table').dataTable();
[/code]

(also tried:)
[code]
$('#device_status').children('table').dataTable(
{
'aoColumnDefs':
[
{ 'asSorting': ['asc','desc'], 'aTargets': ['_all'] }
]
});
[/code]

No matter what I do (try through console, try another table), I get the same error:
Uncaught TypeError: Cannot read property 'asSorting' of undefined

Any help? I'm frustrated that I've run into a brick wall right at the start of my time using DataTables. I'm going to try again with Firefox, but I want my site to work both with Firefox and Chrome..

Many thanks,
Aaron

allan

Hi Aaron,

I've just put together an example with your code, and it seems to work okay in Chrome for me: http://live.datatables.net/asiyow/edit#javascript,html (click the render button to see the resulting table).

If you could link me to an example page which shows the error, that would be great.

Allan

airandfingers

Thanks for your help, Allan!
We've narrowed down the problem to the fact that our tables are dynamically generated through jQuery. We've appended to your code an example of a dynamically-generated table not working:
http://live.datatables.net/asiyow/2/edit#javascript,html,live

We're dynamically generating all of our tables using jQuery (using data pulled asynchronously from our server), so any help with applying dataTables to these would be greatly appreciated!

Thanks,
Aaron

airandfingers

Allan, before you waste any time on that..
Going through the code on that site, I realized that I'd forgotten to add 's to my tag. When I added the as well, the code started working!
http://live.datatables.net/asiyow/4/edit

But I'm still having some problems with the tables in my app, and I think it's because I'm loading the data in after dataTable() is called. I'm going to take a look at the dataTables documentation to find out the preferred way to add rows dynamically to a dataTable.

Thanks for your help, and let me know if you have any further insight into my problem!
-Aaron

airandfingers

For an example of what we're now seeing, see:

http://live.datatables.net/asiyow/5/edit

As you can see, we're adding data dynamically to the dataTable, and dataTables is apparently looking at the table data at the time it's called. Since I know that dataTables supports dynamically adding data, I'm now looking into the preferred ways to do so.

Once again, thanks for your help, especially for pointing us to jsbin, which is a really cool site :)

allan

Yeah - I love JSBin. Going to spend a bit more time in the next few weeks integrating it with this site a bit more.

[code]
$('#my_jquery_table').dataTable();

$('#my_jquery_table tbody')
.append('Red12')
.append('Green100')
} );
[/code]

To add data to the table you need to use fnAddData ( http://datatables.net/api#fnAddData ). DataTables doesn't listen to the DOM, so it doesn't know when you've added a new row - so you need to use the API to modify the table if you want the changes to be registered with DataTables.

Allan

airandfingers

Integrating JSBin with the site would be great! It'd be really cool if for each of the examples we could see the Initialisation code and Live example side-by-side, dynamically updated when the jQuery code is changed. You could also support multiple sets of example code per example (toggled by tabs), demonstrating variations on the example topic.

Yep, we're now using fnAddData; just have to start using the DataTables API for all six of our tables, for all the different ways we plan to add, modify, and remove table data. I'm looking forward to it ^^ If I have any questions unrelated to this topic, I'll post a new topic on this forum.

Thanks,
Aaron

allan

Yup - that's exactly the idea that I'm aiming for with JSBin :-). Great to get some feedback on the idea - thanks!

Hope you enjoy using DataTables!

Allan