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
dda8aeeb2000VolvoSilver
fa870edb1968FordBlack
63206a462005VolvoGreen
32ace0831993FordGreen
c7a479992004MercedesBlack
9b8835e21970BMWOrange
2bb698cd1966AudiYellow
905254952009AudiOrange
84b59f0e2008BMWBlue
4e57f1ae2001MercedesMaroon
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>