DataTable - Lazy Loading

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 demonstrates uses an in-memory list to mimic a real datasource like a database.

ModelYearManufacturerColor
85595fc11973OpelOrange
a39e83252003RenaultSilver
82d9a5b31971AudiSilver
f8d3e9041979AudiOrange
82fce3a21972MercedesBlue
25af2e842003AudiBlack
eca1df361995OpelWhite
fbeddc881987VolvoYellow
558da0071995BMWGreen
4887f2031972RenaultBlack
Car Detail
Model:
Year:
Manufacturer:
Color:

Source

<h:form id="form">

    <p:dataTable var="car" value="#{tableBean.lazyModel}" paginator="true" rows="10"
                 paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                 rowsPerPageTemplate="5,10,15" selectionMode="single" selection="#{tableBean.selectedCar}" id="carTable" lazy="true">

        <p:ajax event="rowSelect" listener="#{tableBean.onRowSelect}" update=":form:display" oncomplete="PF('carDialog').show()" />

        <p:column headerText="Model" sortBy="model" filterBy="#{car.model}">
            <h:outputText value="#{car.model}" />
        </p:column>

        <p:column headerText="Year" sortBy="year" filterBy="#{car.year}">
            <h:outputText value="#{car.year}" />
        </p:column>

        <p:column headerText="Manufacturer" sortBy="manufacturer" filterBy="#{car.manufacturer}">
            <h:outputText value="#{car.manufacturer}" />
        </p:column>

        <p:column headerText="Color" sortBy="color" filterBy="#{car.color}">
            <h:outputText value="#{car.color}" />
        </p:column>
    </p:dataTable>

    <p:dialog header="Car Detail" widgetVar="carDialog" resizable="false"
              showEffect="explode" hideEffect="explode">

        <h:panelGrid id="display" columns="2" cellpadding="4">

            <f:facet name="header">
                <p:graphicImage value="/images/cars/#{tableBean.selectedCar.manufacturer}.jpg"/>
            </f:facet>

            <h:outputText value="Model:" />
            <h:outputText value="#{tableBean.selectedCar.model}" style="font-weight:bold"/>

            <h:outputText value="Year:" />
            <h:outputText value="#{tableBean.selectedCar.year}" style="font-weight:bold"/>

            <h:outputText value="Manufacturer:" />
            <h:outputText value="#{tableBean.selectedCar.manufacturer}" style="font-weight:bold"/>

            <h:outputText value="Color:" />
            <h:outputText value="#{tableBean.selectedCar.color}" style="font-weight:bold"/>
        </h:panelGrid>
    </p:dialog>

</h:form>