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>

Open up your browser's javascript console, and reload your page. Do you see any error/message appear in the console ? — LeGEC
– LeGEC, Commented Sep 30, 2013 at 7:37

Dmitry Pashkevich · Accepted Answer · 2013-10-03 09:38:33Z

2

+50

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.

edited Oct 3, 2013 at 9:38

Dmitry Pashkevich

13.6k10 gold badges58 silver badges75 bronze badges

answered Oct 2, 2013 at 18:40

Barryrowe

1,37311 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Smajl Over a year ago

I had <header-portal> instead of <header-portlet> in my liferay-xml file, this solves the problem - u deserve the bounty, though :-)

Barryrowe Over a year ago

Good to hear. I see the second documentation block was edited out as duplicate text. It was very similar, but the second block was the documentation block stating that the <header-portlet-javascript> element references the script from the "portlet's" context and not the portals. I should have bolded the difference. Either way, glad you're working!

user2590805 · Accepted Answer · 2013-09-29 00:05:10Z

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

Collectives™ on Stack Overflow

Jquery Datatables in a portlet

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related