Back to contents

JetSmartFilters. How to use AJAX Pagination

Find out how to use AJAX Pagination with the help of JetSmartFilters plugin.

JetSmartFilters plugin includes nine awesome filters and pagination widget. The great thing is that this plugin uses AJAX technique, which allows filters to work without reloading the page after adding a new filter.

You can add Pagination to products or publications to allow visitors to go through the full list without refreshing the page.

From this tutorial, you will learn how to use AJAX Pagination. I will apply pagination to the JetWooBuilder Products Grid, but you can also use it for templates or posts. So, let’s commence!

Using AJAX Pagination

Step 1 — First of all, open the needed page and drag-n-drop the Products Grid widget to the section where you want to place it and customize it according to your preferences.

JetSmartFilters.Products Grid

Step 2 — After that, drop the Pagination widget at the page and navigate to the Content settings. Here you need to choose Pagination for JetWooBuilder Products Grid from the dropdown list.

JetSmartFilters. Edit Pagination. Content settings 1

In the pagination type select AJAX type. There’s also an option to set the Query ID in case you use multiple widgets of the same provider on the page.

JetSmartFilters. Edit Pagination. Content settings 2

Step 3 — Moreover, in the Controls settings, you can Enable Prev/Next buttons, and change its text. Also, you’re able to set a number of items to either side of the current page, not including the current page and set a number of items on either the start and the end list edges.

JetSmartFilters. Edit Pagination. Controls settings

Step 4 — When you’re done with all settings, click on the Publish button and preview the result.

These easy steps is all you need to do to use AJAX Pagination. Well done! Hoe this tutorial was useful.