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
e8fcf5a11978VolvoYellow
3df1a9b51984RenaultRed
755a6e181984VolkswagenYellow
92ef54561961OpelBlack
ec9982ec1999MercedesRed
6d8118031988AudiYellow
a382775b1961RenaultGreen
27247cde1981VolkswagenSilver
edfe6e9a1977AudiWhite
09c260bb1998OpelBrown
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>