时间戳

首页 > 解决方案 > DataTable 在 Liferay Portlet 中不起作用

javascript - DataTable 在 Liferay Portlet 中不起作用

问题描述

我正在正确设置我的表 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 脚本工作正常，除了这个。谢谢！

标签： javascriptjqueryliferay-7

解决方案

您可以尝试一些更改：

  1. jQuery在脚本标签之前插入datatables脚本标签。
  2. 添加格式良好的文件<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>

祝你好运...

推荐阅读