Таблицы данных в Liferay 7.3 JSPX - PullRequest
Новая
       42

Таблицы данных в Liferay 7.3 JSPX

0 голосов
/ 24 апреля 2020

Я использую Liferay Developer Studio 3.8 и Liferay Portal Tomcat 7.3.1.

Я создал проект Portlet4Spring Mvc и следовал инструкциям на этом сайте https://datatables.net/manual/installation, чтобы вставить Datatables в мой файл JSPX (с импортом cdn). Но я заметил некоторые проблемы при вставке некоторых стилей Bootstrap и теперь с импортом Datatables в файл JSPX.

Вот код моего файла JSPX: 

<?xml version="1.0" encoding="UTF-8"?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:portlet="http://xmlns.jcp.org/portlet_3_0"
xmlns:spring="http://www.springframework.org/tags"
xmlns:form="http://www.springframework.org/tags/form" version="2.1"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<jsp:directive.page contentType="text/html" pageEncoding="UTF-8" />
<portlet:defineObjects />
<portlet:actionURL var="mainFormActionURL" />
<h1>Listado de Profesionales</h1>
<div class="container">
    <table id="tableProfesionales" class="table dataTable table-striped table-bordered" cellspacing="0" width="100%">
        <thead class="thead-dark">
            <tr>
                <th scope="col">Id</th>
                <th scope="col">Nombres</th>
                <th scope="col">Locación</th>
                <th scope="col">Cargo</th>
                <th scope="col">Experiencia</th>
                <th scope="col">Disponibilidad</th>
            </tr>
        </thead>
        <tbody>
            <c:forEach var="profesional" items="${profesionales}">
                <tr>
                    <td>${profesional.get_id()}</td>
                    <td>${profesional.getNombres()}</td>
                    <td>${profesional.getLocacion()}</td>
                    <td>${profesional.getCargo()}</td>
                    <td>${profesional.getExperiencia()}</td>
                    <td>${profesional.getDisponibilidad()}</td>
                </tr>
            </c:forEach>
        </tbody>
    </table>
</div>
<script>
    $(document).ready(function() {
                        var table = $('#tableProfesionales')
                                .DataTable(
                                        {
                                            "sPaginationType" : "full_numbers",
                                            "language" : {
                                                "decimal" : "",
                                                "emptyTable" : "No hay datos disponibles",
                                                "info" : "Mostrando _START_ a _END_ de _TOTAL_ registros",
                                                "infoEmpty" : "Mostrando 0 a 0 de 0 registros",
                                                "infoFiltered" : "(filtrado de _MAX_ registros)",
                                                "infoPostFix" : "",
                                                "thousands" : ",",
                                                "lengthMenu" : "Mostrando _MENU_ registros",
                                                "loadingRecords" : "Cargando...",
                                                "processing" : "Procesando...",
                                                "search" : "Búsqueda:",
                                                "zeroRecords" : "No hay registros",
                                                "paginate" : {
                                                    "first" : "Primero",
                                                    "last" : "Último",
                                                    "next" : "Siguiente",
                                                    "previous" : "Anterior"
                                                },
                                                "aria" : {
                                                    "sortAscending" : ": activar para organizar columnas de forma ascendente",
                                                    "sortDescending" : ": activar para organizar columnas de forma descendente"
                                                }
                                            },
                                            "order" : [ [ 5, "asc" ] ],
                                            "columnDefs" : [ {
                                                "targets" : [ 0 ],
                                                "visible" : false,
                                                "searchable" : false
                                            } ]
                                        });

                        $('#tableProfesionales tbody').on('click','td',function() {
                                            var id = table.row(this).data()[0];
                                            var url = "http://localhost:8080/group/guest/perfil-profesional?id="+id;
                                            console.log("id",id);
                                            console.log(url);
                                            setTimeout(function() {
                                                window.location = url;
                                            }, 3000);
                                        });
                    });
</script>
<link rel="stylesheet" type="text/css"
    href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css"></link>
<script type="text/javascript" charset="utf8"
    src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css"
    href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css"></link>
</jsp:root>

Некоторые из моих проблемы:

  • Иногда портлет показывает данные в таблице, а иногда - нет (он показывает только элементы внутри тега thead). Данные поступают из API REST, который я тестировал, и REST всегда работает, даже если в таблице нет данных.
  • Иногда библиотека Datatable функционирует, а иногда нет. Когда я открываю Chrome Инспектор, он показывает: TypeError: $().Datatable is not a function. Иногда мне нужно перезагрузить страницу, но с открытым Inpector, таким образом, библиотека функционирует.
  • Когда, наконец, Datatables наконец загружается, я не могу щелкнуть нигде в порту, например, элемент меню или '+ ', который добавляет другой виджет, потому что инспектор показывает TypeError: cannot read 'classList' of null

Я пытался изменить позицию импорта Datatables, но если они не были наконец, портлет показывает белый квадрат без Таблица.

Может кто-нибудь дать подсказку или обходной путь?

Заранее спасибо

...