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
8b6bf7271977HondaRed
039f210d1994VolkswagenBlack
980996b51979BMWWhite
1fe439b41987JaguarBrown
5a1942141960HondaWhite
3ccd41121997VolkswagenYellow
6460a3f52001BMWGreen
cc658bd81983VolkswagenGreen
93edb81a1984AudiGreen
c06cd1df1996VolvoYellow
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>