Jquery Datatables in a portlet

Question

I have a portlet and one of its JSP pages contains a table populated with java objects:
Here is a sample code:

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

<% } %>

I would like to make this table a DataTable using JQuery DataTables plugin. I put the downloaded libraries in docroot/js folder in my Liferay portlet and set the path to it in Liferay-portlet.xml conf like this (as instructed in the tutorial I referenced):

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

Now the magic part comes - how do I actually init the dataTable from my example?

I thought, that inserting the following script udner the table in my JSP (according to the tutorial) would do, but it does nothing:

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

What did I do wrong? Perhaps I did something wrong with specifying the path to my JQuery libraries... or am using it wrong? Should I call this function somewhere else? I am a newbie when it comes to JS and Jquery (sorry for dummy question), I just need to get this one thing working...

EDIT: SOLVED by replacing <header-portal-javascript> with <header-portlet-javascript>

Answer 1

Your process is correct, but your javascript include is wrong for the portlet. This should work as long as your Javascript paths are correct in your liferay-portlet.xml file.

If you use the <header-portal-javascript> tag, the path is relative to the portal's context. From the Liferay documentation

Element : header-portal-javascript

Set the path of JavaScript that will be referenced in the page's header relative to the portal's context path.

What you want is to use the <header-portlet-javascript> tag, so the path is relative to the portlet's context.

If you do this, and make sure that in your portlet-directory/docroot folder you have the folder structure you posted (/js/DataTables/media/js/jquery.js) this will work.

Answer 2

You must point dataTable to your data. If your messages variable is a list of objects encoded as JSON string received ie. from @RenderMapping method, you can use this code:

<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" }
        ]
    });

});

For other dataTables parameters description, see dataTables web