DataTable on jquery-ui tabs? (Cannot read property mData of undefined?)

deanparkr

Hi,

I am trying to add the DataTable to four tables one in each tab using jQuery-UI tabs. I have a jsfiddle of this here:

http://jsfiddle.net/deanparkr/4gx70q8f/

I am finding it works fine for the first tab, but there is no functionality on the other tabs. It is throwing:

Uncaught TypeError: Cannot read property 'mData' of undefined.

Looking around the forum it seems people have implemented this within Jquery-ui tabs before. Has anyone had any experiencing implementing DataTable into jqueryUi-tabs ?

john_l

It looks like your issue is that you are initializing all the tables at once. The tables on the tabs that aren't active won't be able to initialize properly as DataTables won't be able to get a size for the tables (since they're not visible yet).

You should add an 'activate' callback to the tabs initialization, that will initialize the datatable on the each tab the first time the tab gets shown.

deanparkr

Hi,

Thanks for your reply. I have added the DataTable initialisation to the activate event here:

http://jsfiddle.net/deanparkr/43da23jr/

It seems to fire - but returns the same Uncaught TypeError: Cannot read property 'mData' of undefined.

Hmmm.

john_l

OK, looks like I was wrong - you can get away with initializing all the tables at once, but you'll first need to fix up the second and third tables to have thead/tbody sections:

http://jsfiddle.net/43da23jr/1/

deanparkr

Ah - that was silly of me. Forgot to turn on accessible table headers in ASP.net for those other tables so they didn't have the required <thead> <tbody> tags.

That was simple!

Thanks for steering me in the right direction :)