How to insert Datatables inside JSPX file?

Message Boards

Laura Prada, modified 4 Years ago.

How to insert Datatables inside JSPX file?

New Member Posts: 6 Join Date: 4/13/20 Recent Posts

I'm using Liferay Developer Studio 3.8 and Liferay Portal Tomcat 7.3.1.

I created a Portlet4SpringMvc project and followed the steps in this site https://datatables.net/manual/installation to insert Datatables in my JSPX file (with cdn imports). But currently I'm getting a raw table without Datatables.

I have noticed some trouble while inserting some Bootstrap styles and now with the Datatables import inside the JSPX file.

Can somebody provide any hint or workaround?
Thanks in advance

Christoph Rabel, modified 4 Years ago.

RE: How to insert Datatables inside JSPX file?

Liferay Legend Posts: 1554 Join Date: 9/24/09 Recent Posts

Any javascript errors?
What happens when you call $("#tableid").DataTable(); in the developer console directly?

Laura Prada, modified 4 Years ago.

RE: How to insert Datatables inside JSPX file?

New Member Posts: 6 Join Date: 4/13/20 Recent Posts

Well, I managed to get some style with this:

[code]`<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
&nbsp;&nbsp; &nbsp;<script type="text/javascript" charset="utf8"         src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
&nbsp;&nbsp; &nbsp;<link rel="stylesheet" type="text/css"         [url="http://[url=http://href=&quot;https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css&quot;">]href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css"&gt;[code]`][url=http://href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css"&gt;]href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css"&gt;[code]`[/url]

But, now I have found that elements like the search bar or the paginator sometimes are there and sometimes no, and I don't know why.
Edit: When datatables is fully loaded, I can't click anywhere inside the portal, because I get this error : "Uncaught TypeError: Cannot read property 'classList' of null". The only way to get rid of it, is by deleting datatables.js import.