Creación de Tablas con paginación utilizando Datatable
- Onesait Platform
Introducción
El objetivo de este post es familiarizarse con la creación de tablas con paginación en servidor utilizando Datatable.
DataTable es un plugin de jQuery que proporciona una funcionalidad avanzada de manipulación y visualización de tablas HTML. Permite ordenar, filtrar, buscar y paginar los datos de una tabla de manera eficiente y flexible.
Creación de la tabla en Front
Se crea en el HTML de la parte FRONT la tabla que vamos a utilizar, con todas sus columnas necesarias (incluyendo los tags de Thymeleaf):
<table id="dashboards" class="table table-hover table-striped" dt:table="true" dt:paginationtype="full_numbers" dt:url="@{/controlpanel/dashboards/listdashboardpageable}">
<thead>
<tr class="cabecera-tabla">
<th class="titulo-columnas text-center" ><span > ID </span></th>
<th class="titulo-columnas" th:text="#{gen.name}">Name</th>
<th class="titulo-columnas text-center" ><span th:text="#{gen.owner}" >Owner</span></th>
<th class="titulo-columnas" th:text="#{gen.description}">Description</th>
<th class="titulo-columnas text-center" th:text="#{gen.public}">Public</th>
<th class="titulo-columnas text-center" ><span th:text="#{gen.created}"> Created At </span></th>
<th class="titulo-columnas text-center" ><span th:text="#{gen.updated}"> Updated At </span></th>
<th class="titulo-columnas text-center" dt:sortable="false" style="width:85px;"><span th:text="#{gen.options}"> Options</span></th>
</tr>
</thead>
</table> Se puede observar el id en la tabla llamado dashboards, el cual vamos a utilizar más adelante para definir la tabla con Datatable.
Utilización de Datatable.
En la parte JavaScript, utilizamos la función $(document).ready(function() { ... }) . Es una función de jQuery que se utiliza para esperar a que el documento HTML se cargue completamente antes de ejecutar el código dentro de la función.
En otras palabras, se asegura de que todo el árbol DOM (Document Object Model) esté disponible y listo para ser manipulado antes de realizar cualquier acción en el código JavaScript.
Dentro de $(document).ready(function() { ... }) introducimos la variable var con el nombre que queremos dar a nuestra tabla $('#dashboards) . Representa la selección del elemento HTML de la tabla con el ID " dashboards " utilizando la función $('#dashboards) de jQuery. La función dataTable() se utiliza para inicializar y aplicar las funcionalidades de DataTable a esa tabla seleccionada.
$( document ).ready(function() {
var oTableDahsboards = $('#dashboards').dataTable({
});
});
Configuración de Datatable.
Para personalizar su comportamiento introducimos las siguientes opciones de Configuración.
var oTableDahsboards = $('#dashboards').dataTable({
"bAutoWidth": false,
"processing": true,
"serverSide": true,
"lengthChange": false,
});
"bAutoWidth": false: Esta opción desactiva el ajuste automático del ancho de las columnas. Si está establecido en false, las columnas de la tabla mantendrán un ancho fijo.
"processing": true: Esta opción indica que se debe mostrar un indicador de procesamiento mientras se están cargando los datos en la tabla. Es útil cuando se están recuperando datos de forma asíncrona.
"serverSide": true: Esta opción indica que los datos de la tabla se cargarán desde el servidor. Esto significa que DataTable enviará solicitudes al servidor para obtener los datos y realizará el procesamiento en el lado del servidor, lo que es útil cuando se trabaja con grandes conjuntos de datos.
"lengthChange": false: Esta opción deshabilita la capacidad de cambiar el número de filas mostradas en la tabla mediante el control de selección de longitud. Con esta configuración, los usuarios no podrán ajustar la cantidad de registros mostrados por página.
Estas opciones son solo algunos ejemplos de las muchas configuraciones disponibles en DataTables. Puedes consultar la documentación oficial de DataTables para obtener más detalles sobre estas opciones y otras opciones disponibles:
Ejecución de servicio java mediante llamada Ajax al servidor.
Para obtener los datos que se van a representar en la tabla, utilizamos una llamada Ajax.
En la cual llamamos al servicio creado en DashboardController.java
Dentro del servicio, obtenemos la configuración actual de la tabla que permitirá recuperar los datos a mostrar en la tabla. Desde el objeto request obtenemos el numero de página, limit, draw, filtrado, nombre de la columna (se obtiene con el columIndex de la columna) y el orden de cada columna.
Como resultado, además de enviarle los datos a mostrar en la tabla es necesario devolver también el numero de registros. De esta forma la librería Datatable será capaz de llevar la cuenta del numero de registros por pagina y le numero de pagina.
Para obtener los datos se utiliza el servicio findDashboardIdentification y para recuperar el numero de registros el servicio countDashboardIdentification.
En el servicio findDashboardIdentification obtenemos los datos filtrando por el tipo de usuario
Para que la consulta al repositorio tenga en cuenta la configuración del filtrado y paginado, es necesario introducir PageRequest.of(offset, limit, Sort.by(Direction.fromString(order.toUpperCase()) como parámetro. Este fragmento de código crea un objeto PageRequest que especifica la información de paginación, incluido el desplazamiento, el límite y el orden de los resultados.
En el repositorio DashboardRepositoryPageable.java que hemos creado para realizar las consultas de paginación, en la query correspondiente, el parámetro Pageable permite especificar los detalles de la paginación, como el número de página y el tamaño de la página.
En DashboardController.java antes de enviar la información, tenemos que transformarla para que Datatable pueda gestionarla y entenderla. Utilizamos DashboardTablePaginationDTO.java
En DashboardTablePaginationDTO.java, es necesario introducir estos parámetros, ya que cuando se utiliza el modo de procesamiento en el lado del servidor de Datatables (serverSide: true), algunos parámetros son importantes para establecer la paginación y mostrar correctamente los datos. Aquí tienes una descripción de estos parámetros:
iTotalRecords: Es el número total de registros en tu conjunto de datos sin aplicar ningún filtro. Es decir, representa la cantidad total de registros disponibles en tu fuente de datos.
draw: Es un número de secuencia que DataTable envía con cada solicitud. Debes devolver este número en la respuesta para que DataTable pueda asociar la respuesta correcta con la solicitud correspondiente. Se utiliza para sincronizar la comunicación entre el cliente y el servidor.
iTotalDisplayRecords: Es el número total de registros después de aplicar cualquier filtro de búsqueda. Por lo tanto, es la cantidad de registros que se mostrarán después de aplicar los criterios de búsqueda especificados por el usuario.
aaData: Es un array de arrays que contiene los datos que se mostrarán en la tabla. Cada array interno representa una fila de la tabla y contiene los valores de las columnas correspondientes.
Creación de columnas en Datatable.
En la opción "columns" de la configuración de DataTables, puedes especificar las columnas de la tabla y sus propiedades.
En el ejemplo anterior, se están definiendo varias columnas, con la propiedad "data" y "name" para el campo "id", "identificación, "user, etc. Esto indica que los datos de esa columna se obtendrán de su campo correspondiente en el objeto de datos. La propiedad "name" se puede utilizar opcionalmente para establecer un nombre para la columna. Nosotros lo utilizamos para obtener el nombre de la columna en la ordenación.
En la opción "columnDefs" de la configuración de DataTables, puedes definir acciones personalizadas para columnas específicas
En el ejemplo anterior, se está utilizando la opción "columnDefs" para definir una acción de renderizado personalizada para la columna con índice 0 (primera columna) índice 1 (segunda columna), índice 2 (tercera columna), etc . El atributo "targets" especifica el objetivo de la definición de columna, en este caso, la columna 0,1,2,3,4,5 y 6. La función de renderizado se define en el atributo "render".
Dentro de la función de renderizado, puedes manipular los datos y devolver el contenido deseado para la celda.
Para la utilización de moment en formato fecha, es necesario introducir el script para su funcionamiento.
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
Visualización de Tabla.
Podemos observar cómo se muestran todos los datos correctamente y se ejecutan las llamadas al servidor al ordenar, filtrar y cambiar de página.
Se puede observar la información enviada al servidor.
y también podemos observar la información que devuelve el servidor.