How to insert Datatables inside JSPX file?

Laura Prada, modified 5 Years ago.

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 5 Years ago.

RE: How to insert Datatables inside JSPX file?

Liferay Legend Posts: 1555 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 5 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.

Community

Company

Feedback

Ask Questions and Find Answers

Important:

Ask is now read-only. You can review any existing questions and answers, but not add anything new.

But - don't panic! While ask is no more, we've replaced it with discuss - the new Liferay Discussion Forum! Read more here here or just visit the site here:

discuss.liferay.com

How to insert Datatables inside JSPX file?