DataTable is not a function on Liferay 7
Multi tool use
DataTable is not a function on Liferay 7
This is my current code on liferay:
liferay
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.js"></script>
<html>
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
<script>
$(document).ready( function () {
$('#table_id').DataTable();
});
</script>
</html>
I did not import any jquery reference because by default it is in liferay 7 already (tested with a jQuery function) so i just copied the datatable CDN on to my liferay.
liferay
datatable
liferay
However it says that datatable is not a function..could i been referencing the datatables wrongly? (unlikely) or i will need a reference to jQuery again? (tried but may cause conflict).
p/s the same code is able to run on jsfiddle and displaying the datatable
>>jsfiddle
1 Answer
1
To use this jQuery plugin, you need to deactive the Liferay JS Loader, as explained here: https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/using-external-libraries.
In your case, your code to import the DataTables JS could be:
<script>
Liferay.Loader.define._amd = Liferay.Loader.define.amd;
Liferay.Loader.define.amd = false;
</script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script>
Liferay.Loader.define.amd = Liferay.Loader.define._amd;
</script>
You should add the snippet above at the bottom of your custom theme (in portal_normal.ftl file, just before the body closing tag).
portal_normal.ftl
body
@Liferayer, I have just updated my answer to precise this.
– Sébastien Le Marchand
Jul 2 at 7:55
i have done as told to add the snippet of codes into portal_normal and removing my existing import in my original code but still unable to display datatable....am i missing out some steps like restarting the server etc since portal_normal is part of the server's file????
– Liferayer
Jul 2 at 8:24
You just need to redeploy your custom theme project (where you have just added the snippet) and your custom portlet (where I assume your HTML is located). What is the result now ? What do you see ? What error is printed on the console ?
– Sébastien Le Marchand
Jul 2 at 12:16
The same problem...Datatable is not a function.. i have redeployed everything after adding the code snippets..
– Liferayer
Jul 3 at 2:22
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
where do you add these? i added on top of my existing codes but still doesnt work..
– Liferayer
Jul 2 at 7:06