Question

这是我在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>

我没有导入任何jquery引用，因为默认情况下它已经在liferay 7中（使用jQuery函数进行了测试），所以我只是将datatable CDN复制到了{{1 }}。

但是它说数据表不是一个函数..我会错误地引用数据表吗？（不太可能）还是我将需要再次引用jQuery？（尝试过，但可能会引起冲突）。

p / s相同的代码可以在jsfiddle上运行并显示数据表 >>jsfiddle

Answer 1

要使用此jQuery插件，您需要停用Liferay JS加载程序，如此处所述：https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/using-external-libraries。

对于您来说，导入DataTables JS的代码可能是：

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

您应该在自定义主题的底部（portal_normal.ftl文件中，body结束标记之前）的上方添加摘要。

Answer 2

Liferay 7.0 DXP使用AMD加载程序来加载javascript文件。

如果要加载相互依赖的js模块，则需要将其禁用。

有很多方法可以做到这一点。

配置（用于7.0 DXP SP2 +或Liferay 7.0 CE GA4 +）您只需打开管理侧栏，然后选择控制面板>配置>系统设置>基础> JavaScript加载程序>取消选中公开全局。

来自代码。

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

如果此代码不起作用，请尝试使用此代码。

<script>
     define._amd = define.amd;
     define.amd = false;
 </script>
 <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
 <script>
     define.amd = define._amd;
 </script>

3。或者，您可以通过手动编辑JS文件来解决此问题。更改js库中的任何文本。

typeof define == 'function'

收件人：

false && typeof define == 'function'

DataTable不是Liferay 7上的功能

2 个答案: