DataTable is not working within Liferay Portlet

Question

I am setting my Table Id properly. I have confirmed however the DataTable part is not working. I am linking my scripts as follows, and there is no error also on them: (Liferay 7x)

<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" rel="stylesheet"></link>
<script type="text/javascript">
$(document).ready(function() {
    $('#tableIdHTML').DataTable();
} );
  </script>

Please suggest me what am I doing wrong. My other java scripts are working okay though except this one. thanks!

Answer 1

There are few changes you can try:

1. Insert the jQuery script-tag before the datatables script-tag.
2. Add a well-formatted <table /> as you can see in the example below.

You can see the example below and compare it your code.

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script>
  $(document).ready(function() {
    $('#tableIdHTML').DataTable();
  });
</script>
<link href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" rel="stylesheet" />

<table id="tableIdHTML" 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>

Good Luck...