5

我有一个 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 的文件夹中，并在conf 中像这样docroot/js设置它的路径（按照我引用的教程中的说明）：Liferay-portlet.xml

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

现在神奇的部分来了——我如何从我的示例中实际初始化数据表？

我认为，在我的 JSP 中的表中插入以下脚本（根据教程）会做，但它什么也没做：

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

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

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

4

2 回答 2

2

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

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

元素：标头-门户-javascript

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

您想要的是使用<header-portlet-javascript>标记，因此路径是相对于 portlet 的上下文的。

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

于 2013-10-02T18:40:56.567 回答
2

您必须将 dataTable 指向您的数据。如果您的messages变量是编码为接收到的 JSON 字符串的对象列表，即。from@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" }
        ]
    });

});

其他dataTables参数说明见dataTables web

于 2013-09-29T00:05:10.403 回答