DataList DataList displays data in a list layout.
Basic
  1. Jaguar, 2006
  2. Fiat, 1998
  3. BMW, 1972
  4. Mercedes, 1975
  5. Honda, 1987
  6. Volvo, 1984
  7. Renault, 1962
  8. Fiat, 2008
  9. Fiat, 1970
  10. Ford, 1985
Definition
Brand: Volkswagen, Year: 1966
Brand: Renault, Year: 1967
Brand: Fiat, Year: 1990
Brand: Renault, Year: 1995
Brand: Renault, Year: 1977
Paginator
Car Info
<h:form id="form">
    <p:dataList value="#{dataListView.cars1}" var="car" type="ordered">
        <f:facet name="header">
            Basic
        </f:facet>
        #{car.brand}, #{car.year}
    </p:dataList>

    <p:dataList value="#{dataListView.cars2}" var="car" type="definition">
        <f:facet name="header">
            Definition
        </f:facet>
        Brand: #{car.brand}, Year: #{car.year}
        <f:facet name="description">
            <p:graphicImage name="demo/images/car/#{car.brand}.gif"/> 
        </f:facet>
    </p:dataList>

    <p:dataList value="#{dataListView.cars3}" var="car" type="unordered" itemType="none" paginator="true" rows="10" styleClass="paginated">
        <f:facet name="header">
            Paginator
        </f:facet>
        <p:commandLink update=":form:carDetail" oncomplete="PF('carDialog').show()" title="View Detail" styleClass="ui-icon ui-icon-search" style="float:left;margin-right:10px">
            <f:setPropertyActionListener value="#{car}" target="#{dataListView.selectedCar}" />
            <h:outputText value="#{car.brand}, #{car.year}" />
        </p:commandLink>
        <h:outputText value="#{car.brand}, #{car.year}" style="display:inline-block"/>
    </p:dataList>

    <p:dialog header="Car Info" widgetVar="carDialog" modal="true" showEffect="blind" hideEffect="explode" resizable="false">
        <p:outputPanel id="carDetail" style="text-align:center;">
            <p:panelGrid  columns="2" rendered="#{not empty dataListView.selectedCar}" columnClasses="label,value">
                <f:facet name="header">
                    <p:graphicImage name="demo/images/car/#{dataListView.selectedCar.brand}-big.gif"/> 
                </f:facet>

                <h:outputText value="Id:" />
                <h:outputText value="#{dataListView.selectedCar.id}" />

                <h:outputText value="Year" />
                <h:outputText value="#{dataListView.selectedCar.year}" />

                <h:outputText value="Color:" />
                <h:outputText value="#{dataListView.selectedCar.color}" style="color:#{dataListView.selectedCar.color}"/>

                <h:outputText value="Price" />
                <h:outputText value="$#{dataListView.selectedCar.price}" />
            </p:panelGrid>
        </p:outputPanel>
    </p:dialog>
</h:form>
                
PrimeTek, Copyright © 2015
All rights reserved.
Running PrimeFaces-6.0.16 on Mojarra-2.2.8.