Strapi will provide us with some valuable data and filters which will make creating our pagination very simple. Specificaly we will get number of items from Strapi and use it's `_limit` and `_start` filters. This information will allow us to calculate pagination using simple JavaScript, Next.js and ofcourse React.

In this episode we are going to learn how to create a pagination for our Nextjs and Strapi website.

Pagination

We are currently getting ten posts on our Sapper homepage, however in the real world that number would most probably be much higher, our WordPress site might have even hundreds or thousands of posts, and of course, we don't want to show all of those posts on our homepage. So, best way to handle that would be pagination, and that is what we are going to be doing in this episode of creating Svelte, Sapper and WordPress site.

Also I'm going to show you how you can add Scss/Sass support to your Sapper project.

In this episode we are going to learn how to paginate our post list and how to add Sass support to our Svelte, Sapper and WordPress application.

Pagination And Sass Support

To do this we are going to use[gatsby-paginate](https://www.npmjs.com/package/gatsby-paginate) plugin, make some changes to `gatsby-node.js` and create a new Gatsby template for our posts that are coming from our WordPress instalation.

In this episode we are going to be creating simple pagination for our WordPress and Gatsby.js site.

Now that we have done [filtering](http://watch-learn.com/video-tutorials/making-websites-october-cms-part-41-ajax-frontend-filters) and [sorting](http://watch-learn.com/video-tutorials/making-websites-october-cms-part-42-ajax-frontend-sorting) with Octobers Ajax framework, we will add one more feature that will make our UI more approachable. This feature is pagination, because we are showing a lot of items and we don't want to show them all at once.

To do this we are going to use Ajax framework and it's `form update` option to refresh our pages list once the query has changed. As you will see this will be pretty simple once you know how to do it.

In this episode we are going to extend our Ajax filtering system with one more feature, and that is going to be Ajax Pagination, using the October CMS Ajax framework.

Ajax Pagination

First we are going to create new field in our database and I'm going to show you how to link up your `name` field with your slug field so that it automatically fills up when you add a title to your to your name field. And then we are going to link up our list with the details page via slug instead of id like we did in the previous episode.

After that I'm going to show you how to set up pagination for your list page and how to use optional URL parameters.

In this episode of Making Web Sites With October CMS I'm going to show you how to link up to the details page via slugs and also how to create pagination for your list pages.

Slugs And Pagination

In this episode we are going to rework our application to accommodate for pagination using WP REST API and Vue.js. This is not very hard to do once you know where WordPress stores information you need to create that pagination.

We are not going to be creating complicated pagination but a simple one, and as you will see even that takes some work. It would be much simpler if WP REST API gave us all the information for making pagination, but, we have to work with what we have and calculate missing information.

In this episode of Theming with WordPress REST API I'm going to show you how you can make simple pagination with Vue.js for your WP REST API application.

Tutorials tagged with: pagination

Get in touch