DataTable - Lazy DataTable has built-in support to deal with huge datasets. In order to enable lazy loading, a LazyDataModel needs to be implemented to query the datasource when pagination, sorting, filtering or live scrolling happens. This example uses an in-memory list to mimic a real datasource like a database.

In a real application, loading should be executed with the query built using the information passed to the load method.

IdYearBrandColor
2b465a401977JaguarBlue
7e8ccb3c1976VolkswagenBrown
e16c3d031970HondaMaroon
7b4ed7551967FiatSilver
df0092b91986MercedesWhite
bbf0353a2005FiatWhite
c3cf245d2009FiatBlack
1f0646d52004BMWMaroon
b2d8e1c91994RenaultSilver
7a6bb72d1970VolkswagenMaroon
Car Detail
<h:form id="form">
    <p:dataTable var="car" value="#{dtLazyView.lazyModel}" paginator="true" rows="10"
                 paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                 rowsPerPageTemplate="5,10,15" selectionMode="single" selection="#{dtLazyView.selectedCar}" id="carTable" lazy="true">
        <p:ajax event="rowSelect" listener="#{dtLazyView.onRowSelect}" update=":form:carDetail" oncomplete="PF('carDialog').show()" />
        <p:column headerText="Id" sortBy="#{car.id}" filterBy="#{car.id}">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year" sortBy="#{car.year}" filterBy="#{car.year}">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand" sortBy="#{car.brand}" filterBy="#{car.brand}">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color" sortBy="#{car.color}" filterBy="#{car.color}">
            <h:outputText value="#{car.color}" />
        </p:column>
    </p:dataTable>

    <p:dialog header="Car Detail" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
        <p:outputPanel id="carDetail" style="text-align:center;">
            <p:panelGrid  columns="2" rendered="#{not empty dtLazyView.selectedCar}" columnClasses="label,value">
                <f:facet name="header">
                    <p:graphicImage name="demo/images/car/#{dtLazyView.selectedCar.brand}-big.gif"/> 
                </f:facet>

                <h:outputText value="Id:" />
                <h:outputText value="#{dtLazyView.selectedCar.id}" />

                <h:outputText value="Year" />
                <h:outputText value="#{dtLazyView.selectedCar.year}" />

                <h:outputText value="Color:" />
                <h:outputText value="#{dtLazyView.selectedCar.color}" style="color:#{dtLazyView.selectedCar.color}"/>

                <h:outputText value="Price:" />
                <h:outputText value="#{dtLazyView.selectedCar.price}">
                    <f:convertNumber type="currency" currencySymbol="$" />
                </h:outputText>
            </p:panelGrid>
        </p:outputPanel>
    </p:dialog>
</h:form>
                
PrimeTek, Copyright © 2015
All rights reserved.
Running PrimeFaces-6.0.16 on Mojarra-2.2.8.