Datatables break with multiple datatables within tabs

j3rg

I have an issue were I get the following error:

TypeError: this.api.cell(...).index(...) is undefined; can't access its "column" property

What I wanted to ultimately accomplish is to have a datatable per tab on a page and have the databales be responsive to mobile viewports. But it's only responsive for the first tab and breaks on the second tab.

As mention above the code breaks on the next tab and specifically on the second row of the datatable within the next tab.

I have over simplified my code here, without removing the main components.

I'm building this page based on a template and the javascript code use to manipulate the datatables comes from that template. Like I said it works for the first tab and crashes on the second row of the datatable in the next tab.

I'm no expert in javascript however I'm currently trying to debug the issue myself. But if I can have this issue resolve by the experts here then I would greatly appreciate that as I don't have much time and wasn't expecting to have this error. I have search the internet and this forum for any situation similar to mine but didn't find anything the closest thing I have found is an issue with the columns needing resizing when a tab is shown.

My actual page has six tabs and I noticed from some testing that its always the next tab. Currently in the pastebin code I have referrenced above their is a datatable code for each tab its always the second javascript code that crashes hence I said the next tab. So it issue goes as follow:

javascript code for Tab1 and Tab2 = Tab1 working Tab2 row2 crashes
javascript code for Tab2 and Tab3 = Tab2 working Tab3 row2 crashes
javascript code for Tab3 and Tab4 = Tab3 working Tab4 row2 crashes
javascript code for Tab4 and Tab5 = Tab4 working Tab5 row2 crashes
and ...so on

Just mention this incase it helps with debugging.

If anymore information is need please let me know.

Thanks,
Jerg

kthorngren

It looks like you are using this library for responsive tables (you are using responsiveHelper):
https://github.com/comanche/datatables-responsive

This is not provided by Datatables and support would need to be from the developer (comanche). Looks like it hasn't been updated in 4 or 5 years. I suspect it is very outdated when used with more recent versions of Datatables.

The good news is Datatables has its own Responsive Extension. Setting up a basic Responsive config and using that with Bootstrap tabs is pretty easy. Here is an example:
http://live.datatables.net/yicovile/1/edit

TypeError: this.api.cell(...).index(...) is undefined; can't access its "column" property
As mention above the code breaks on the next tab and specifically on the second row of the datatable within the next tab.

Its not clear to me from your code snippet what you are doing when the above error occurs. Is this when you are trying to expand the details? If so then this would be an issue for the developer of the library you are using.

Assuming you have a recent version of Datatables I suggest removing the Responsive library you have now and install the Datatables extension. Make sure oyu get the proper Responsive Bootstrap integration files. The download Builder will help with that. You can look at the BS 3 example here:
https://datatables.net/extensions/responsive/examples/display-types/bootstrap-modal.html

You will see the JS and CSS (CSS Tab) files needed.

Kevin

j3rg

First off thank you for the quick response. I believe using the datatables responsive extension, as oppose to the outdated responsive plugin should fix this issue. So that's the first thing I will apply to my code.

The error occurred on page load. If you notice I placed a console.log() in the rowCallBack option as the error reference the line in this closure function, this is how I knew the issue always occurred on the second row of the next tab.

Once again thanks for the response and I will let you know if I was able to resolve the issue.

Regards,
Jorgen

j3rg

Thanks, Kevin, using the responsive extension made it work exactly how I wanted.