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
63fbb6d01975FiatRed
5908b8f81973VolkswagenSilver
f981e2e11985BMWGreen
fa4ef6a51988BMWGreen
df05e5d81999VolvoBlue
fdd732a81974MercedesOrange
bd19b82f1962FiatGreen
68243fca1992FiatSilver
932c71f12000BMWYellow
cb611b4a1960JaguarBrown
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 © 2017
All rights reserved.
Running PrimeFaces-6.2-SNAPSHOT on Mojarra-2.3.2.