Pagination Layouts

you can now fully customise your pagination controls, by building a pagination layout change page with style introduction pagination is a catch all term for the website user's ability to navigate through "pages" of results it's available on all list views including webapps, modules and categories custom pagination layouts are now available on most features you can now also change the html structure of the pagination controls with custom layouts on most siteglide features unfortunately, custom pagination layouts are not yet available on site search results, as the results contain items from several features, making pagination more complicated to implement furthermore, we provide you with liquid variables detailing for example the number of available pages the number of items per page whether a previous or next page exists this can help you build more advanced designs which adapt dynamically depending on the data available examples of pagination layouts will soon become available on the layout library outputting pagination a recap default pagination when you output a list layout it will fetch results based on the parameters you've given it the parameter per page will decide how many items will initially display in the list by default, this value will be 20 if more results were fetched than the per page value, pagination controls will be added to allow the user to change page and view the rest of the data how to remove pagination controls set the parameter show pagination 'false' to remove pagination controls how to move pagination controls firstly remove the default pagination controls, as above secondly, add the following liquid where you'd like the controls to sit within your html structure {% include 'modules/siteglide system/get/get pagination' %} specifying a pagination layout choose your layout file layouts for pagination should be stored in code editor at the following path layouts/pagination/my pagination layout name liquid add a pagination layout to a webapp or module "include" tag {% include 'webapp' id '3' layout 'default' per page '20' sort type 'properties name' sort order 'asc' pagination layout 'my pagination layout name' %} add a pagination layout to a pagination "include" tag {% include 'modules/siteglide system/get/get pagination' pagination layout 'my pagination layout name' %} developing a pagination layout introduction to pagination layouts developing a pagination layout can start simple, but many designs will involve complex elements we'd recommend checking out our design system examples when they become available on layout library you could alter these, or use them for inspiration and start from scratch how to change page in order to make a pagination control button functional, you need to refresh the current page with a modified url query parameter for example, if i'm on the "about" page of my site, the url will be /about , by default, this will show page 1 if i want to send the user to page 11, you'll need to add a page query parameter on the url so that it looks like this /about?page=11 you can do this with html, using the \<a> tag \<a href="/about?page=11">11\</a> or, you can use javascript to achieve the same effect this will change page for all pagination controls on the page, so currently it's best practice to only display one webapp/ module list with pagination on the page liquid variables within pagination layouts, the following variables will be available to give you contextual information current page the current page (integer) previous page designed to be used with a prev button, its value is the previous page number (integer), or false (boolean) if there is no previous page prev path href for previous button next page designed to be used with a next button, its value is the next page number (integer), or false (boolean) if there is no next page next path href for next button first path href for first button last path href for last button total pages the total number of pages (integer) page search params the preserved search terms in url format starts with & so can be added at the end of url to new page ( ?page=x will already be added at the end of a url, so a prevailing & is appropriate) for example, you might have a button which will take users to the next page, but it might be helpful to know whether or not a next page exists (otherwise, the user will see an error when they navigate) using these variables and a liquid if statement, you can disable the button when the user is on page 1 in this example, we also use a variable from the above list to set the button's href next looping in order to give developers full flexibility, we've exposed the for loop in pagination layouts the reason for this is that you may not want to show all pagination buttons at once, but instead only show a limited range of buttons if you're not familiar with liquid for loops, the following platformos documentation might be helpful loops https //documentation platformos com/api reference/liquid/loops objects https //documentation platformos com/api reference/liquid/objects many of these objects give helpful information within the context of a loop iteration