Back to contents

JetEngine: How to Add Pagination to Listing Grid Block

From this tutorial, you will learn how to combine Listing Grid and Pagination blocks of the JetEngine plugin on the page created via Gutenberg Editor.

Pagination is functionality that divides the content of the block into several parts and afterward shows how many “pages” of content there are and on what “page” the user currently is. If you have lots of items in the Listing Grid and want to give the user an opportunity to see them all, the Pagination block will be a perfect tool. 

1 Step— Add Pagination block to the page

Let’s assume that you already have a page with the Listing Grid block on it. Go to that page and click on the “Add Block” button. Find the Pagination block and click on it to add it under the Listing Grid.

pagination block

2 Step— Deal with the Pagination General settings section

Take a look at the right-side settings menu. In the This filter for drop-down menu, choose the “Listing Grid” option. Make sure there are no other Listing Grids on the page. There is also an option to add the pagination to the WooCommerce products.

Apply type drop-down allows you to choose how the changes will be applied.

  • AJAX – when the user clicks on the next page, it opens without reloading the page;
  • Page reload – the part of the Listing Grid appears after page reload;
  • Mixed – it won’t reload the page but transforms the URL, so you can copy the address of the specific page of pagination.
pagination general settings

3 Step— Deal with the Controls settings section

This settings section defines how the pagination controls will look like. 

pagination controls settings
  • Prev/Next Text. The text you will type into those two bars will be visible on the “Prev Page” and “Next Page” buttons;
  • Items center offset. If you have more than 10 pages in the pagination, you would probably like to hide the part of the number range to make it smaller. In this bar, you can type in the number of pages that will be shown on both sides of the current page;
  • Items edge offset. This feature works with the Items center offset. It allows you to define how many pages will be visible on each edge of the range;
  • Provider top offset. You can type the height in pixels from the top of the page here. When the user scrolls the page to that height, the pagination will load.

4 Step— Do the styling

If you have installed and activated the free JetStyleManager plugin, you will see the “Block Style” button on the top toolbar. There you will find all the style settings for the Pagination block. If you have trouble understanding what those features do, check out this Block Style overview.

pagination block style settings

After customizing the design, you can go to the frontend and look at how the pagination works:

Now you know how to link the Pagination and Listing Grid blocks on the page created with the help of Gutenberg Editor. Enjoy!