Saltar a contenido

4.8 Datatable

Componente de tabla, utilizado para organizar y presentar conjuntos de datos tabulares de manera estructurada y visualmente efectiva.

Este componente está asociado a un repositorio definido en "repo", lo que permite la vinculación directa de datos.

Además, presenta funcionalidades como la capacidad de filtrar y ordenar los datos según criterios predefinidos, lo que mejora la eficiencia en la búsqueda y visualización de información.

La personalización del número de filas visibles y la selección de propiedades de entidad contribuyen a adaptar el datatable a diversas necesidades de presentación y contenido.

Atributo Valor por defecto Tipo Descripción
Comunes id null String Identificador único del componente. Si no tiene id, se le asigna con nomenclatura ${tag}${num}.
render true Boolean o JEXLExpression Expresión EL para evaluar si el componente debe mostrarse.
onBeforeRender null String Método JS a ejecutar antes de que el componente actual sea renderizado.
onAfterRender null String Método JS que se ejecutará una vez renderizado el componente actual.
action null String Identificador de la acción a realizar cuando el usuario interactúa con este componente.
allowsPartialRestore false Boolean Si el estado del componente actual debe restaurarse cuando el usuario vuelva a la vista.
repo null String Identificador del repositorio utilizado para recoger los datos.
numVisibleRows null Integer Número de filas visibles. En caso de existir más registros se mostrará la barra de desplazamiento vertical.
properties null String Lista separada por comas de propiedades de entidad para definir el conjunto de campos del formulario. 
<datatable id="datatableProvincia" repo="provinciaRepo" numVisibleRows="5" properties="c_provincia_id, d_provincia">
</datatable>

Imagen 1

4.8.1 Column

Atributo Valor por defecto Tipo Descripción
Comunes id null String Identificador único del componente. Si no tiene id, se le asigna con nomenclatura ${tag}${num}.
render true Boolean o JEXLExpression Expresión EL para evaluar si el componente debe mostrarse.
onBeforeRender null String Método JS a ejecutar antes de que el componente actual sea renderizado.
onAfterRender null String Método JS que se ejecutará una vez renderizado el componente actual.
action null String Identificador de la acción a realizar cuando el usuario interactúa con este componente.
allowsPartialRestore false Boolean Si el estado del componente actual debe restaurarse cuando el usuario vuelva a la vista.
value null String o JEXLExpression Expresión EL para calcular el valor del componente.
headerText null String Etiqueta para el encabezado de la columna.
filtering Boolean Si es true los datos del datatable podrán ser filtrados por el valor aportado en esta columna.
ordering Boolean Si es true los datos del datatable podrán ser ordenados descendente o ascendente por esa columna.

4.8.1.1 Filter

Atributo Valor por defecto Tipo Descripción
property null String Campo de la entidad por la que se va a filtrar.
matching String Tipo de relación: ”eq | le | gt | contains”.
valueExpression String o JEXLExpression Valor con el que se realizará el filtrado.

4.8.1.2 Order

Atributo Valor por defecto Tipo Descripción
property String Campo de la entidad por el que se va a ordenar.

4.8.2 Repofilter

Atributo Valor por defecto Tipo Descripción
id null String Identificador único del componente. Si no tiene id, se le asigna con nomenclatura ${tag}${num}.

La etiqueta repoFilter no tiene atributos, la expresión se define anidando etiquetas de predicado como and|or|.

  • Operadores: EQ, LT, GT, LE, GE, IN, NOT_IN, IS_NULL, NOT_NULL, LIKE, CONTAINS, STARTS_WITH, ENDS_WITH.
  • Criterios: and, or
Atributo Valor por defecto Tipo Descripción
property null String Nombre de la propiedad de la entidad utilizada para filtrar los resultados.
mandatory false Boolean Un operador puede incluir el parámetro “mandatory=True” para indicar que la consulta no se puede ejecutar si ese valor no está disponible.
value null String o JEXLExpression Expresión EL utilizada como valor. 
<datatable id="datatableProvincia2" repo="provinciaRepo" numVisibleRows="5">
    <column id="column_c_provincia_id" headerText="Cod. Provincia" filtering="true" ordering="true" value="${entity.c_provincia_id}">
        <filter property="c_provincia_id" matching="contains" valueExpression="${this.column_c_provincia_id}"/>
        <order property="c_provincia_id"/>
    </column>
    <column id="column_d_provincia" headerText="Provincia" filtering="true" ordering="true" value="${entity.d_provincia}">
        <filter property="d_provincia" matching="contains" valueExpression="${this.column_d_provincia}"/>
        <order property="d_provincia"/>
    </column>
</datatable>

 <datatable id="datatableProvincia3" repo="provinciaRepo" numVisibleRows="5">
    <column headerText="Cod. Provincia" filtering="false" ordering="false" value="${entity.c_provincia_id}"/>
    <column headerText="Provincia" filtering="false" ordering="false" value="${entity.d_provincia}"/>
    <repofilter>
        <le property="c_provincia_id" value="9"/>
    </repofilter>
</datatable>

Imagen 2 Imagen 3