Jquery Portlet 中的数据表

Jquery Datatables in a portlet

本文关键字：数据表 Portlet Jquery      更新时间：2023-09-26

我有一个 portlet，它的一个 JSP 页面包含一个填充了 java 对象的表：
下面是一个示例代码：

<% {%>
    <table id="logtable">
        <thead>
        <tr><th>From</th><th>To</th><th>Time</th></tr>
        </thead>
        <tbody>
        <c:forEach var="message" items="${messages}"> 
            <tr>
                <td><c:out value="${message.sender}"/></td>
                <td><c:out value="${message.receiver}"/></td>
                <td><c:out value="${message.timestamp}"/></td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
<% } %>

我想使用JQuery DataTables插件使这个表成为DataTable。我将下载的库放在 Liferay portlet docroot/js文件夹中，并在Liferay-portlet.xml conf 中设置它的路径，如下所示（按照我引用的教程中的说明）：

<header-portal-javascript>/js/DataTables/media/js/jquery.js</header-portal-javascript>
<header-portal-javascript>/js/DataTables/media/js/jquery.dataTables.js</header-portal-javascript>

现在神奇的部分来了 - 我如何从我的示例中实际初始化 dataTable？

我想，在我的 JSP 中插入以下脚本（根据教程）中的表就可以了，但它什么也没做：

<script>
$(document).ready( function () {
    $('#logtable').dataTable();
} );
</script>

我做错了什么？也许我在指定 JQuery 库的路径时做错了什么......还是用错了？我应该在其他地方调用这个函数吗？当涉及到JS和Jquery时，我是新手（对不起，我的假问题），我只需要让这一件事工作......

编辑：通过将<header-portal-javascript>替换为<header-portlet-javascript>来解决

您的过程是正确的，但是您的 javascript 包含对于 portlet 来说是错误的。只要你的 Javascript 路径在你的 liferay-portlet.xml 文件中是正确的，这应该可以工作。

如果使用 <header-portal-javascript> 标记，则路径相对于门户的上下文。来自Liferay文档

元素 ： header-portal-javascript

设置 JavaScript 的路径 将在页面的页眉中相对于门户的 上下文路径。

您需要的是使用 <header-portlet-javascript> 标记，以便路径相对于 Portlet 的上下文。

如果这样做，并确保在portlet-directory/docroot文件夹中具有您发布的文件夹结构（/js/DataTables/media/js/jquery.js），这将起作用。

您必须将 dataTable 指向您的数据。如果您的messages变量是编码为接收的 JSON 字符串的对象列表，即。从@RenderMapping方法中，您可以使用以下代码： 

<table id="logtable">
    <thead>
    <tr><th>From</th><th>To</th><th>Time</th></tr>
    </thead>
    <tbody>
        <!-- Yes tbody is empty - here comes the magic part -->
    </tbody>
</table>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
    var aaDataSet = ${messages};
    $('#logtable').dataTable( {
        "iDisplayLength" : 20,
        "sPaginationType" : "full_numbers",
        "aaData": aaDataSet,
        "aoColumns": [
            { "mData": "sender" },
            { "mData": "receiver" },
            { "mData": "timestamp" }
        ]
    });
});

有关其他数据表参数说明，请参阅数据表网站

相关文章：