javascript - nulled - jquery ajax json spring mvc example

Jquery Datatables en un portlet

Question

Tengo un portlet y una de sus páginas JSP contiene una tabla llena de objetos java:
Aquí hay un código de muestra:

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

<% } %>

Me gustaría hacer de esta tabla una DataTable utilizando el plugin JQuery DataTables . Puse las bibliotecas descargadas en la carpeta docroot/js en mi portlet Liferay y establecí la ruta en Liferay-portlet.xml conf como esta (como se indica en el tutorial al que hice referencia):

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

Ahora viene la parte mágica: ¿cómo inicio realmente la dataTable de mi ejemplo?

Pensé que sería útil insertar el siguiente script udner en la tabla de mi JSP (según el tutorial), pero no hace nada:

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

¿Qué hice mal? Tal vez hice algo mal al especificar la ruta a mis bibliotecas JQuery ... ¿o lo estoy usando mal? ¿Debería llamar a esta función en otro lugar? Soy un novato en lo que respecta a JS y Jquery (lo siento por la pregunta ficticia), solo necesito que esto funcione ...

EDIT: SOLUCIONADO reemplazando <header-portal-javascript> con <header-portlet-javascript>

Answer 1

Debe apuntar dataTable a sus datos. Si su variable de messages es una lista de objetos codificados como cadena JSON recibida, es decir. del método @RenderMapping , puede usar este código:

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

});

Para la descripción de otros parámetros de tablas de datos, consulte dataTables web

Answer 2

Su proceso es correcto, pero su inclusión de javascript es incorrecta para el portlet. Esto debería funcionar siempre que tus rutas de JavaScript sean correctas en tu archivo liferay-portlet.xml.

Si usa la etiqueta <header-portal-javascript> , la ruta es relativa al contexto del portal. De la documentación de Liferay

Elemento: header-portal-javascript

Establezca la ruta de JavaScript a la que se hará referencia en el encabezado de la página en relación con la ruta de contexto del portal.

Lo que quiere es usar la etiqueta <header-portlet-javascript> , por lo que la ruta es relativa al contexto del portlet.

Si hace esto, y se asegura de que en la carpeta portlet-directory / docroot tenga la estructura de carpetas que ha publicado (/js/DataTables/media/js/jquery.js), esto funcionará.