Howdy

I am trying to feed a datatable in a Spring app. My approach until now is horrible, when I filter a date I request all the data with Ajax to the server and draw it onto the Datatable. With only 1645 rows the drawing already takes 15 seconds.

I have been reading documentation and I have seen that the best approach is to do server-side processing and Ajax, but I have not seen any example of server side processing with Java.

I do not know either how to load the data with the Ajax API, depending on the value of every row there are some columns including images, and I do not know how to do that with the Ajax API.

The rows of my table look like this (th is Thymeleaf):

<tr th:each="aviso : ${avisos}"
th:attr="data-id-del-aviso=${aviso.id}">

                            <td class="align-middle"><img
                                th:src="@{${aviso.estado.icono}}" width=40px /></td>
                            <td class="align-middle"><img
                                th:src="@{${aviso.tipoDeServicio.icono}}" width=45px /></td>
                            <td class="align-middle liquidado"
                                th:if="${aviso.liquidadoSemanalmente}"><img
                                th:src="@{/img/check.png}" width=40px /></td>
                            <td class="align-middle liquidado"
                                th:if="${!aviso.liquidadoSemanalmente}"><img
                                th:src="@{/img/cross.png}" width=40px /></td>
                            <td class="align-middle fecha-de-cogida-del-aviso"
                                th:text="${#dates.format(aviso.fechaDeRecepcion, 'dd/MMM/yyyy')}"></td>
                            <td class="align-middle hora-de-cogida-del-aviso"
                                th:text="${#dates.format(aviso.fechaDeRecepcion, 'HH:mm')}"></td>
                            <td class="align-middle telefono-del-cliente"
                                th:text="${aviso.cliente.telefono}"></td>
                            <td class="align-middle tecnico"
                                th:text="${aviso.tecnico != null ? aviso.tecnico.id : ''}"></td>
                            <td class="align-middle nombre-del-cliente"
                                th:text="${aviso.cliente.nombre.replaceAll('\s\w+', '')}"></td>
                            <td class="align-middle direccion-de-servicio"
                                th:text="${aviso.cliente.direccion1}"></td>
                            <td class="align-middle codigo-postal"
                                th:if="${aviso.cliente.codigoPostal < 100}"
                                th:text="${'0' + aviso.cliente.codigoPostal}"></td>
                            <td class="align-middle codigo-postal"
                                th:if="${aviso.cliente.codigoPostal >= 100}"
                                th:text="${aviso.cliente.codigoPostal}"></td>
                            <td class="align-middle poblacion"
                                th:text="${aviso.cliente.poblacion}"></td>
                            <td class="align-middle descripcion"
                                th:text="${aviso.descripcion}"></td>
                                <td class="align-middle descripcion"
                                th:text="${aviso.observacionDelTecnico}"></td>
                            <td class="d-none align-middle clave"
                                th:text="${aviso.clave != null ? aviso.clave.nombre : ''}">1</td>
                            <td class="d-none align-middle numero-de-albaran"
                                th:text="${aviso.numeroDeAlbaran}"></td>
                            <td class="d-none align-middle tipo-de-servicio"
                                th:text="${aviso.tipoDeServicio.nombre}"></td>
                            <td class="d-none align-middle estado"
                                th:text="${aviso.estado.nombre}"></td>
                            <td class="d-none align-middle estado"
                                th:text="${aviso.usuarioQueHaRegistradoElAviso.nombre + ' ' + aviso.usuarioQueHaRegistradoElAviso.apellidos}"></td>
                            <td class="d-none align-middle estado"
                                th:text="${aviso.urgente}"></td>
                            <td class="d-none align-middle estado"
                                th:text="${aviso.cliente.direccionDeServicio}"></td>
                        </tr>