As part of my job in managing this blog, I check my stats frequently, and I've noticed that some of my more basic Vue.js articles have had consistently good traffic for quite some time. As I find myself doing more and more with "regular" JavaScript (sometimes referred to as "Vanilla JavaScript", but I'm not a fan of the term) I thought it would be a good idea to update those old posts for folks who would rather skip using a framework. With that in mind, here is my update to my post from over four years ago, Building Table Sorting and Pagination in Vue.js
You don't need to read that old post as I think the title is rather descriptive. How can we use JavaScript to take a set of data - render it in a table - and support both sorting and pagination? Here's how I solved this. Before I begin, a quick note. I'll be loading all of my data and while that works with a "sensible" amount of data, you don't want to be sending hundreds of thousands of rows of data to the client and sorting and paging in the client. That being said, I think an entirely client-side solution is absolutely safe if you understand the size of your data and know it's not going to impact performance.
In this article, we will learn how we create server-side pagination, which is very useful whenever we need to display a large number of records. This is the second part of my article on server-side pagination, you can check out the first part of this article from the link below.
In this article, we are going to show previous and next buttons with custom logic so whenever we click on next button it shows the next page of records. For example, suppose we are on page one and after clicking on next, it would show the second page of records. However, here we will see different logic.
Backend
Here in the previous article we have already created database and tables so there's no need to create it again. If you don't have the related database, tables, and stored procedure, then please check the previous article.
Do you want to change the number of posts displayed on your WordPress blog page? By default, all WordPress archive pages show a maximum of 10 posts per page.
However, you can change them easily from your dashboard settings and show as many articles as you like.
In this article, we will show you how to easily change the number of posts displayed on your WordPress blog page with just 2 simple steps.
The first thing you need to do is login to your WordPress dashboard and go to Settings » Reading page. Next, you need to change the value of ‘Blog pages show at most’ option to any number of posts you want to display.
Don’t forget to click on the ‘Save Changes’ button to store your settings.
Now your WordPress blog and archive pages will show the number of posts that you want to display.
How Many Posts Should I Display on My Blog Page?
Usually, bloggers display 10 posts per page as set by default. It seems an appropriate number to show from the user-experience and SEO (Search Engine Optimization) perspective.
You can display as many posts as you like, but we do not recommend choosing a number higher than 10 especially when you are not showing excerpts.
Mainly because the more posts you display on a page, the bigger the page size will be, which makes it slower to load.
On WPBeginner’s Blog and Archive pages, we show 10 posts with an excerpt and the featured image. This makes it easier for our users to browse the archives quickly, and it offers a better user experience.
We hope this article helped you change the number of posts displayed on your blog page. You may also want to see our guide on how to schedule your posts in WordPress to be published at a future time.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
The idea behind most of web applications is to fetch data from the database and present it to the user in the best possible way. When we deal with data there are cases when the best possible way of presentation means creating a list.
Depending on the amount of data and its content, we may decide to show all content at once (very rarely), or show only a specific part of a bigger data set (more likely). The main reason behind showing only part of the existing data is that we want to keep our applications as performant as possible and avoid loading or showing unnecessary data.
If we decide to show our data in "chunks" then we need a way to navigate through that collection. The two most common ways of navigating through set of data are:
The first is pagination, a technique that splits the set of data into a specific number of pages, saving users from being overwhelmed by the amount of data on one page and allowing them to view one set of results at a time. Take this very blog you're reading, for example. The homepage lists the latest 10 posts. Viewing the next set of latest posts requires clicking a button.
The second common technique is infinite scrolling, something you're likely familiar with if you've ever scrolled through a timeline on either Facebook or Twitter.
We're going to take a deeper look at the first type in this post. Pagination is something we encounter on a near-daily basis, yet making it is not exactly trivial. It's a great use case for a component, so that's exactly what we're going to do. We will go through the process of creating a component that is in charge of displaying that list, and triggering the action that fetches additional articles when we click on a specific page to be displayed. In other words, we’re making a pagination component in Vue.js like this:
Let's go through the steps together.
Step 1: Create the ArticlesList component in Vue
Let’s start by creating a component that will show a list of articles (but without pagination just yet). We’ll call it ArticlesList. In the component template, we’ll iterate through the set of articles and pass a single article item to each ArticleItem component.
Now we need to create a method that will load the next page, the previous page or a selected page.
In the pageChangeHandle method, before loading new articles, we change the currentPage value depending on a property passed to the method and fetch the data respective to a specific page from the API. Upon receiving new data, we replace the existing articles array with the fresh data containing a new page of articles.
The component will accept currentPage and pageCount properties from the parent component and emit proper actions back to the parent when the next or previous button is clicked. It will also be responsible for disabling buttons when we are on the first or last page to prevent moving out of the existing collection.
That was the easy part. Now we need to create a list of page numbers, each allowing us to select a specific page. The number of pages should be customizable and we also need to make sure not to show any pages that may lead us beyond the collection range.
Requirement 2: Allow the user to go to a specific page within a range
Let's start by creating a component that will be used as a single page number. I called it BasePaginationTrigger. It will do two things: show the page number passed from the BasePagination component and emit an event when the user clicks on a specific number.
In the script section, we need to add one more method (onLoadPage) that will be fired when the loadPage event is emitted from the trigger component. This method will receive a page number that was clicked and emit the event up to the ArticlesList component.
Requirement 3: Change the range of page numbers based on the current page
OK, now we have a single trigger that shows us the current page and allows us to fetch the same page again. Pretty useless, don't you think? Let's make some use of that newly created trigger component. We need a list of pages that will allow us to jump from one page to another without needing to go through the pages in between.
We also need to make sure to display the pages in a nice manner. We always want to display the first page (on the far left) and the last page (on the far right) on the pagination list and then the remaining pages between them.
We have three possible scenarios:
The selected page number is smaller than half of the list width (e.g. 1 - 2 - 3 - 4 - 18)
The selected page number is bigger than half of the list width counting from the end of the list (e.g. 1 - 15 - 16 - 17 - 18)
All other cases (e.g. 1 - 4 - 5 - 6 - 18)
To handle these cases, we will create a computed property that will return an array of numbers that should be shown between the next and previous buttons. To make the component more reusable we will accept a property visiblePagesCount that will specify how many pages should be visible in the pagination component.
Before going to the cases one by one we create few variables:
visiblePagesThreshold:- Tells us how many pages from the centre (selected page should be shown)
paginationTriggersArray: Array that will be filled with page numbers
visiblePagesCount: Creates an array with the required length
Scenario 1: The selected page number is smaller than half of the list width
We set the first element to always be equal to 1. Then we iterate through the list, adding an index to each element. At the end, we add the last value and set it to be equal to the last page number — we want to be able to go straight to the last page if we need to.
Scenario 2: The selected page number is bigger than half of the list width counting from the end of the list
Similar to the previous scenario, we start with the last page and iterate through the list, this time subtracting the index from each element. Then we reverse the array to get the proper order and push 1 into the first place in our array.
We know what number should be in the center of our list: the current page. We also know how long the list should be. This allows us to get the first number in our array. Then we populate the list by adding an index to each element. At the end, we push 1 into the first place in our array and replace the last number with our last page number.
And we are done! We just built a nice and reusable pagination component in Vue.
When to avoid this pattern
Although this component is pretty sweet, it’s not a silver bullet for all use cases involving pagination.
For example, it’s probably a good idea to avoid this pattern for content that streams constantly and has a relatively flat structure, like each item is at the same level of hierarchy and has a similar chance of being interesting to the user. In other words, something less like an article with multiple pages and something more like main navigation.
Another example would be browsing news rather than looking for a specific news article. We do not need to know where exactly the news is and how much we scrolled to get to a specific article.
That’s a wrap!
Hopefully this is a pattern you will be able to find useful in a project, whether it’s for a simple blog, a complex e-commerce site, or something in between. Pagination can be a pain, but having a modular pattern that not only can be re-used, but considers a slew of scenarios, can make it much easier to handle.
Have you noticed that your blog posts with a lot of comments load slower than other posts? That’s because loading so many comments increase server load which increases your average page load time.
Having a lot of comments is a good thing because it means that your users are engaged with your content. Your most commented posts are usually the most popular posts on your blog.
However if a lot of comments are slowing down your website, then it can hurt your SEO rankings. That’s when pagination for WordPress comments comes handy.
In this article, we will show you how to paginate comments in WordPress to speed up your post load time. The best part is that it comes as a default feature in WordPress, and it is very easy.
Why You Should Paginate Comments in WordPress
Comment pagination helps you improve your website speed which is an important factor in your website SEO rankings.
Many of our users have reported that sometimes posts with a lot of comments can cause their readers to see white screen of death because it exhausts their server’s memory.
Even when it doesn’t cause ‘white screen of death’, posts with a lot of comments tend to be really really slow.
Comment pagination reduces server load for your most commented posts by splitting comments into multiple pages.
Another reason to paginate your WordPress comments is to maintain the keyword density of your articles. Comments add a lot of content to your post’s page, and they may not always include your target keywords in a sufficient amount.
When keyword ratio to content decreases, search engines fail to index your post for the right keywords.
Comment pagination can also have a negative SEO impact if it is not used correctly. Basically, WordPress generates URLs for each new page of comments. Search engines may consider this as ‘duplicate content’.
This issue can be easily fixed by using the Yoast SEO plugin, which points search engines to the canonical URL of your article.
Now that we have discussed the pros and cons of comment pagination, let’s take a look at how to easily paginate comments in WordPress.
Paginating WordPress Comments in Two Steps
The first thing you need to do is login to your WordPress admin area and go to Settings » Discussions page.
Next, look for the ‘Break comments into pages’ option. From here you need to enter the number of comments you want on each page, and how you want to display them.
Don’t forget to click on the ‘Save Changes’ button to store your settings.
You can now visit any popular post on your website that has a lot of comments. You will notice the pagination links below the comments.
Depending on your theme’s styling, you will either see numeric pagination or ‘Previous / Next’ comment links.