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