How to do paging?

In this example, we will display a name list into multipage. The final result will look like following, the name list will be breaking down into several pages, when you click the page number, it will redirect to the related page.

First, we need to create a name list. Go to Content – Content on the main navigation menu, create a new content type called ‘list’ and create a text field called ‘name’. Then we create a name list like following.

Create a View, put the following code to create a template to display name and page number.

Now we will make it dynamic. First we need to add the data source. Set the data source as ContentList – ByFolder since we need to get all the content from the name list. Remember to change the Alias name.

Select the content folder as the name list which we just created before. Click the Configure tab to set the details. The PageSize means how many items you want to display on one page. We set it to 3 means we will display 3 names on each page. You can set it to any number as you want. You can leave the other settings as default.

Select the <h2> element which we will use it to display names, create a repeater. Set the data source as Name_list.

Bind data to the <h2> element.

Select the Page_Num <li> element to repeat and display the page number.

Next, make sure you select the <a> element under the <li> element.

Bind data to the <a> element.

It’s not done yet because we haven’t set the link while we click the page number. Select the <a> element and click the ‘Link’ button, the system will automatically recognize it as a page number, so on the popup window, don’t change anything, just click ‘Save’. Save and return.

Create an empty layout, you can add style and scripts later.

Create a new page by using this layout. Add the view which we just created to this page.

Now preview the page, you can see the multipage function is done.