Lazy loading is a very helpful feature to handle large datasets. It will not load all the data at once but as small chunks based on user demand. DataList supports lazy loading on pagination interaction. This feature is available by enabling the lazy attribute (that is, lazy="true") and also by invoking the onLazyLoad callback to retrieve the data from the remote data sources. Refer to the events section for the signature and more details.

The lazy load event object provides the first record in the page and the number of rows in the current page to get the next set of data. Also you should provide the total records by projection query for pagination configuration. This is useful to display pagination links based on the total number of records available even though that many records are not available on page load (that is, only current page records exist in a lazy mode).

Let's take an example of the lazy loading feature for a DataList component with a basic prototype as shown here:

<p-dataList [value]="lazyloadingBrowsers" [paginator]="true" [rows]="5"   
  [lazy]="true"
  (onLazyLoad)="loadData($event)" [totalRecords]="totalRecords">
  ... // Content
</p-dataList>

The component class has to define the lazy loading event callback to retrieve the records based on user request (in this case, it would be pagination) as shown here:

loadData(event:any) {
  let start = event.first;//event.first = First row offset
  let end = start + event.rows;//event.rows = Number of rows per page
  this.browserService.getBrowsers().subscribe((browsers: any) =>
    this.lazyloadingBrowsers = browsers.slice(start,end));
}

In the preceding code snippet, you can observe that both the first and rows properties of an event are helpful for retrieving the next bunch of records. Based on the rows attribute, it tries to fetch the next rows number of records on every instance.