responsive integration

MarkoM91

I am trying to integrate the responsive feature in datatables in one of my projects but it keeps giving me the same error Cannot read property 'Api' of undefined. is It due to a conflict in the head?

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

kthorngren

Your HTML doesn't look to be valid. I see multiple </header> tags in the example. You might want to run it through an HTML validator like the WC3 Validator. But thats not the problem.

The biggest issue is you are loading jQuery twice; jquery.min.js and jquery-3.3.1.slim.min.js. jQuery should only be loaded once. I don't think Datatables supports using jquery-3.3.1.slim.js as I believe it doesn't have ajax builtin. Try removing the slim version.

Kevin

MarkoM91

nope, stope is not that.

http://live.datatables.net/halikipi/9/edit

kthorngren

Like I said you have problems with your HTML that needs fixed. I removed most of the page to get it to just a Datatables with Bootstrap solution.
http://live.datatables.net/jusatuxi/1/edit

There are comments in the file of what I did to get the Datatable with responsive working. Here are a few of them:

1. Added the responsive plugin
2. Commented out the tfoot as it is malformed and causes the Cannot read property 'nodeName' of null error. You need to make sure the number of columns in the tfoot match the number of table columns. Plus there are many other errors in your tfoot.
3. Removed the unnecessary jquery.dataTables.css when using BS4 integration
4. Removed duplicate bootstrap.min.css and a couple other CSS nad JS that weren't loading.
5. Removed all but one table row for troubleshooting.

I suggest you use the Download Builder to get the proper Datatables JS and CSS files for your solution.

Kevin

MarkoM91

thank you

MarkoM91

why doesn't let me link my local css file? if link it datatable doesn't work anymore, if I remove the link it works but I can't style my project.

kthorngren

Are you talking about in your test case? If so, that environment doesn't have access to your local resources. They would need to be placed somewhere accessible via the internet or you would copy the contents directly into the test case.

Kevin

MarkoM91

no when I use It on my pc, I Saw you commented the link to my stylesheet whe decomment the link dataTable stops working like there is some kind of conflict. I tried to add style to html but it has the same effect

kthorngren

Have no idea. My recommendation would be to slowly add code (one section at a time of your stylesheet) back into your project until you find the issue. There is definitely some issues which is why I removed all but what was needed for Datatalbes.

Kevin