Close

Primefaces - DataTable On-Demand Data

[Last Updated: Aug 18, 2018]

Following example shows how to load DataTable rows on-demand i.e. loading data as we scroll vertically down.

Example

JSF page

src/main/webapp/index.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
    <h2>PrimeFaces DataTable On-Demand Data example</h2>
    <h:form>
        <p:dataTable var="employee"
                     value="#{employeeBean.employeeList}"
                     scrollable="true"
                     scrollRows="10"
                     liveScroll="true"
                     scrollHeight="200"
                     liveScrollBuffer="1"
                     style="border:solid 1px #999;">
            <p:column headerText="Id">
                <h:outputText value="#{employee.id}"/>
            </p:column>
            <p:column headerText="Name">
                <h:outputText value="#{employee.name}"/>
            </p:column>
            <p:column headerText="Phone Number">
                <h:outputText value="#{employee.phoneNumber}"/>
            </p:column>
            <p:column headerText="Department">
                <h:outputText value="#{employee.dept}"/>
            </p:column>
        </p:dataTable>
    </h:form>
</h:body>
</html>

Managed bean

@ManagedBean
@ViewScoped
public class EmployeeBean {
  private List<Employee> employeeList;

  @PostConstruct
  private void postConstruct() {
      employeeList = DataService.Instance.getEmployees();
  }

  public List<Employee> getEmployeeList() {
      return employeeList;
  }
}
public class Employee {
  private long id;
  private String name;
  private String phoneNumber;
  private String dept;
    .............
}

Running

To try examples, run embedded tomcat (configured in pom.xml of example project below):

mvn tomcat7:run-war

Output

On scrolling via arrow down key:

Example Project

Dependencies and Technologies Used:

  • primefaces 6.2: PrimeFaces is one of the most popular UI libraries in Java EE Ecosystem and widely used by software companies, world renowned brands, banks, financial institutions, insurance companies, universities and more. [Description from primefaces-6.2.pom]
  • jsf-api 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
  • jsf-impl 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
  • JDK 1.8
  • Maven 3.5.4
On demand row loading Select All Download
  • data-table-on-demand-loading
    • src
      • main
        • java
          • com
            • logicbig
              • example
        • webapp
          • index.xhtml

    See Also