Pagination And "Show More"

When loading a large amount of data, instead of increasing page load time you can opt to display a "Show More" button.

Pagination is a technique used to assist in loading and displaying a large amount of data. The best known example of pagination is used on Google: 

As of March 2016, Oncord no longer supports pagination. Instead, a "Show More" button is displayed which reveals more content:

Click here to view the media release for the positives of this approach.

To implement this feature, you can simply add the attribute paging="true" to a <data:repeater> tag, and pagingrows="5" to control the number of elements to display before displaying the "Show More" button.

An Example: Posts

The following code is used to display a list of Posts associated with a Post Category:

<data:repeater datasource="\Components\Website\Posts::getAllForCategory(1)" as="post"> <data:template component="\Components\Website\Posts" templatetype="list" /> </data:repeater>

Introduce the Show More button by adding the attributes  paging="true" and pagingrows="5" to the <data:repeater> tag as shown below:

<data:repeater paging="true" pagingrows="5" datasource="\Components\Website\Posts::getAllForCategory(1)" as="post"> <data:template component="\Components\Website\Posts" templatetype="list" /> </data:repeater>

The Data Repeater

The data repeater specified above uses the following attributes, for a list of all attributes please see the API here;

as="post" - This attribute determines the name of the variable to be registered for the repeating element. In this case the variable has been given the name "post" and is therefore referenced as $post.

datalimit="4" - This attribute defines the maximum number of rows the data repeater will return. In this case it was decided that there was no need to have a maximum number of posts, so it was left out.

datasource="\Components\Website\Posts::getAllForCategory(1)" - This attribute defines the data source of the repeater. In this example all articles where the post category id=1 will be returned. To find a post category id, navigate to the post categories page of the dashboard, and then click a category to open the category edit page. On this page there is a tab labelled "Developer Info", which lists the post category ID.

paging="true" - This attribute enables the "Show More" paging feature.

pagingrows="5" - This attribute defines the number of rows to display before displaying the "Show More" button.