DataTable con paginación en base de datos con Primefaces
Índice de contenidos.
1. Introducción
En este tutorial veremos un ejemplo de uso del dataTable de Primefaces que permite la carga bajo demanda de los datos a mostrar en la tabla. Esta forma de sacar la información es la más recomendable ya que para grandes volúmenes de datos la memoria se vería sobrecargada en exceso y con ello degradaríamos la escalabilidad de nuestra aplicación. La solución a este problema está en paginar el listado en base de datos mostrando más datos a medida que el usuario
los solicita. Este planteamiento tiene el inconveniente de que se necesitan más consultas a base de datos pero conseguimos traernos únicamente los datos que se requieren y como decía anteriormente liberando mucha más memoria al servidor.
El código fuente del ejemplo lo puedes descargar de aquí.
2. Entorno
- MacBook Pro 15′ (2.8 GHz Intel Core 2 Duo, 4GB DDR3 SDRAM).
- Sistema Operativo: Mac OS X Snow Leopard 10.6.4
- JDK 1.6.0_20
- Primefaces 2.1
- JSF 2.0.2
- Spring 3.0.4
- Hibernate Core 3.3.1
3. Uso del Componente
Dentro de los atributos disponibles del dataTable los que son importantes para nuestro ejemplo son el lazy y dynamic. Ambos hay que ponerlos a true. En el ejemplo sacaremos un listado de futbolistas.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<h:form> <p:datatable var="footballer" value="#{datatableCtrl.footballers}" paginator="true" paginatorposition="bottom" rows="5" lazy="true" dynamic="true" loadingmessage="#{msg['entity.loading']}"> <p:column> <f:facet name="header"> <h:outputtext value="#{msg['Footballer.number']}"></h:outputtext> </f:facet> <h:outputtext value="#{footballer.number}"></h:outputtext> </p:column> <p:column> <f:facet name="header"> <h:outputtext value="#{msg['Footballer.name']}"></h:outputtext> </f:facet> <h:outputtext value="#{footballer.name}"></h:outputtext> </p:column> <p:column> <f:facet name="header"> <h:outputtext value="#{msg['Footballer.lastname']}"></h:outputtext> </f:facet> <h:outputtext value="#{footballer.lastname}"></h:outputtext> </p:column> </p:datatable> </h:form> |
En la parte del ManagedBean debemos implementar el código encargado de construir el dataTable y proporcionarle el medio para que pueda recargar el
listado con los datos una vez que el usuario pagine. Esto lo haremos en el método init anotado con @PostConstruct para que Spring lo llame una única vez
tras la creación del objeto.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
@ManagedBean @ViewScoped public class DatatableCtrl implements Serializable { private static final long serialVersionUID = 4089937794197364974L; private LazyDataModel<Footballer> footballers; @ManagedProperty(value = "#{dao}") private Dao dao; @SuppressWarnings("unused") @PostConstruct private void init() { final Long numEvents = (Long) dao.findByQuery( "select count(id) from Footballer", -1, -1, null).get(0); footballers = new LazyDataModel<Footballer>(numEvents.intValue()) { private static final long serialVersionUID = 8885722005055879976L; @SuppressWarnings("unchecked") @Override public List<Footballer> fetchLazyData(int first, int pageSize) { return dao.findByQuery("from Footballer", first, pageSize, null); } }; } public LazyDataModel<Footballer> getFootballers() { return footballers; } public void setDao(Dao dao) { this.dao = dao; } } |
En el ManagedBean nos creamos una instancia de LazyDataModel, el tipo de datos encargado de trabajar con el listado de futbolistas. Esta clase tiene un método abstracto, el fetchLazyData, que estamos obligados a implementar y donde meteremos el código encargado de consultar la lista de elementos paginados. El componente, a medida que vayamos paginando, llamará a este método pasándole la página en la que se encuentra el usuario y el tamaño de la lista que viene dado por el atributo rows del dataTable, en nuestro caso 5 elementos.
Un consideración a tener en cuenta a la hora de construir el LazyDataModel es que hay que pasarle el número de elementos que tendrá el dataTable para que el componente pueda pintar el número de páginas totales. Para proporcionárselo hacemos un count y se lo pasamos al constructor del LazyDataModel.
El resultado del ejemplo es el siguiente:
A través del atributo loadingMessage del componente se puede indicar un mensaje de información de espera por si la consulta tarda demasiado tiempo. Es el que aparece en la parte superior de los registros de la tabla.
Conclusiones
Dentro de las múltiples configuraciones disponibles del componente DataTable de Primefaces creo que la que hemos visto en este tutorial es una de las más recomendables si en vuestras aplicaciones tenéis que sacar grandes volúmenes de datos por no mencionar su facilidad de uso y configuración.
Este tutorial va dedicado a Cagatay Civici, creador de Primefaces y declarado seguidor del Barca al cual, como no podía ser de otra forma, agradecemos enormemente su trabajo y aportación de tan grande librería de componentes JSF.
Espero que te haya servido de ayuda.
Un saludo. Juan.
Gracias por la aportación ….. espero que sigaís con estos tutoriales … (nos debes uno de drag and drop je,je … es broma)
Estupendo artículo Juan.
Además sirve como maqueta/ejemplo de JSF 2.0.2 + Spring 3.0.4 + Primefaces 2.1
Disculpa a mi me pone el paginador en la parte de arriba y de abajo, y solo la necesito abajo
me puedes ayudar?