DataTable 在 Liferay Portlet 中不工作

Question

我正在正确设置我的 Table ID。我已经确认 DataTable 部分不工作。我按如下方式链接我的脚本，它们也没有错误：(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>

请告诉我我做错了什么。我的其他 java 脚本工作正常，但这个除外。谢谢！

Answer 1

您可以尝试一些更改：

在 datatables 脚本标签之前插入 jQuery 脚本标签。
添加格式正确的 <table />，如下例所示。

您可以查看下面的示例并将其与您的代码进行比较。

<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>

祝你好运...

DataTable 在 Liferay Portlet 中不工作

DataTable is not working within Liferay Portlet

javascript

jquery

liferay-7