\n
![\"Custom](\"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2023\/03\/Custom-Post-Pagination-with-JavaScript.png\")
<\/p>\nIn this article, we try to show an example of post pagination or navigation created by JavaScript.<\/p>\n
So, let\u2019s see the article for Pagination in Vanilla JavaScript, how to create a custom post pagination with JavaScript, Fetching REST API Posts, how to Implement Pagination in JavaScript, Implementing Pagination Logic and posts pagination with JavaScript.<\/p>\n
In this case, when we create a website or web application, especially if they feature a lot of template\u00a0content and it\u2019s generally a good idea is divided it into pages\u00a0to reduce the number of items that appear on the screen at once.
\n<\/p>\n
For the purpose of our example, we are using fetch the content from this\u00a0example API<\/a> response.<\/p>\n Firstly, we create our template and then fetch all required posts from the API using the browser\u2019s built-in Fetch API.<\/p>\n Hence, we first need to create a basic HTML markup template that will be dynamically filled via our JavaScript later<\/p>\n As mentioned before, we require you to fetch the data, calculate the number of pages, decide when and how to split, and then show a portion of it to the user.<\/p>\n Let’s get started by first fetching from all our posts and then later we will amend this to query only a few data points per page:<\/p>\n In this situation, we need first one is the number of posts that we want to declare per page and then the current page number (1 by default), and the total number of pages. Here we give the total number of pages a fixed number of 30<\/p>\n Secondly, here we making use of these parameters by ammending<\/strong> our fetch request like below the code<\/p>\n Now we create the pagination button by the below code to our application template<\/p>\n Now we add the CLICK<\/strong> event listener, to it and show the appropriate content when the button is clicked like the below code<\/p>\n Now we add the CLICK<\/strong> event listener, to it and show the appropriate content when the button is clicked like the below code<\/p>\n Finally, open your HTML file in your browser. Also, I attached a zip file for your help, so please click the\u00a0download link<\/a>\u00a0to get JavaScript preloader resources.<\/p>\n That\u2019s it. If you enjoyed reading this article and have more questions please reach out to our\u00a0support team<\/a>\u00a0via live chat or\u00a0email<\/a>\u00a0and we would be glad to help you. we provide server\u00a0hosting<\/a>\u00a0for all types of need and we can even get your\u00a0server<\/a>\u00a0up and running with the service of your choice.<\/p>\n","protected":false},"excerpt":{"rendered":" In this article, we try to show an example of post pagination or navigation created by JavaScript. So, let\u2019s see the article for Pagination in Vanilla JavaScript, how to create a custom post pagination with JavaScript, Fetching REST API Posts, how to Implement Pagination in JavaScript, Implementing Pagination Logic and posts pagination with JavaScript. How […]<\/p>\n","protected":false},"author":8,"featured_media":5506,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[157,25,162,159,44,1],"tags":[54,47,105,103,48,113],"class_list":["post-5505","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-centos-7","category-web-hosting-virtualization","category-javascript","category-linux-server","category-kvm-xen","category-virtual-private-servers","tag-best-vps-hosting-server-maryland","tag-cheap-cloud-servers","tag-cheap-storage-server-hosting","tag-cheapest-vps","tag-dedicated-server-hosting-in-washington-d-c","tag-speed-test-vps"],"yoast_head":"\nPrevious JavaScript Articles<\/h3>\n
\n
Pagination in Vanilla JavaScript<\/h3>\n
\r\n<section class=\"pt-2\">\r\n\u00a0 \u00a0 \u00a0 \u00a0 <div class=\"container\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"title-section\">\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <h1 class=\"title\">Custom Post Pagination with JavaScript<\/h1>\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"posts-section row\"><\/div>\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"pagination-section\">\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <ul class=\"pagination\">\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <li class=\"page-item prev\"><a class=\"page-link\" href=\"#\">Previous<\/a><\/li>\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <li class=\"page-item next\"><a class=\"page-link\" href=\"#\">Next<\/a><\/li>\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/ul>\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\r\n\u00a0 \u00a0 \u00a0 \u00a0 <\/div>\r\n \u00a0 <\/section>\r\n<\/pre>\n
Fetching REST API Posts<\/h3>\n
\r\nconst postsSection = document.querySelector(\".posts-section\");\r\n\u00a0 \u00a0 \u00a0 \u00a0 const fetchPosts = async (pageNumber) => {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const response = await fetch(\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \"https:\/\/jsonplaceholder.typicode.com\/posts\"\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 );\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const posts = await response.json();\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 postsSection.innerHTML = \"\";\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 posts.forEach((post) => {\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 postsSection.innerHTML += `\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"posts-card col-md-4\">\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"post-item\">\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"post-title\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <h2 class=\"post-title-text\">${post.title}<\/h2>\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"post-body\">\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <p class=\"post-body-text\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ${post.body}\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 `;\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 });\r\n\u00a0 \u00a0 \u00a0 \u00a0 };\r\n\u00a0 \u00a0 \u00a0 \u00a0 fetchPosts();\r\n<\/pre>\nHow to Implement Pagination in JavaScript<\/h3>\n
\r\nconst numberPerPage = 6;\r\nvar pageNumber = 1;\r\nvar numberOfPages = 30;\r\n<\/pre>\n
\r\nconst postsSection = document.querySelector(\".posts-section\");\r\n\u00a0 \u00a0 \u00a0 \u00a0 const fetchPosts = async (pageNumber) => {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const response = await fetch(\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 `https:\/\/jsonplaceholder.typicode.com\/posts?_page=${pageNumber}&_limit=${numberPerPage}`\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 );\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const posts = await response.json();\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 postsSection.innerHTML = \"\";\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 posts.forEach((post) => {\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 postsSection.innerHTML += `\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"posts-card col-md-4\">\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"post-item\">\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"post-title\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <h2 class=\"post-title-text\">${post.title}<\/h2>\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"post-body\">\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <p class=\"post-body-text\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ${post.body}\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 `;\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 });\r\n\u00a0 \u00a0 \u00a0 \u00a0 };\r\n\u00a0 \u00a0 \u00a0 \u00a0 fetchPosts();\r\n<\/pre>\nImplementing Pagination Logic<\/h3>\n
If you want then buy a good, reliable, secure web\u00a0hosting<\/a>\u00a0service \u00a0from here:\u00a0click here<\/a><\/strong><\/em><\/h5>\n
\r\n<div class=\"pagination-section\">\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <ul class=\"pagination\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <li class=\"page-item prev\"><a class=\"page-link\" href=\"#\">Previous<\/a><\/li>\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <li class=\"page-item next\"><a class=\"page-link\" href=\"#\">Next<\/a><\/li>\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/ul>\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\r\n<\/pre>\n
Implementing Previous Button<\/h4>\n
\r\n\/\/ Add event listeners to the prev button\r\n\u00a0 \u00a0 \u00a0 \u00a0 const prev = document.querySelector('.prev');\r\n \u00a0 \u00a0 \u00a0 prev.addEventListener('click', (e) => {\r\n\u00a0 \u00a0 \u00a0 \u00a0 e.preventDefault();\r\n\u00a0 \u00a0 \u00a0 \u00a0 if (pageNumber > 1) {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 pageNumber--;\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 fetchPosts(pageNumber);\r\n\u00a0 \u00a0 \u00a0 \u00a0 }\r\n\u00a0 \u00a0 \u00a0 \u00a0 });\r\n<\/pre>\nImplementing Next Button<\/h4>\n
If you want then buy a good, reliable, secure web\u00a0hosting<\/a>\u00a0service \u00a0from here:\u00a0click here<\/a><\/strong><\/em><\/h5>\n
\r\n\/\/ Add event listeners to the next button\r\n \u00a0 \u00a0 \u00a0 const next = document.querySelector(\".next\");\r\n\u00a0 \u00a0 \u00a0 \u00a0 next.addEventListener(\"click\", (e) => {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 e.preventDefault();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if (pageNumber < numberOfPages) {\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 pageNumber++;\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 fetchPosts(pageNumber);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\r\n\u00a0 \u00a0 \u00a0 \u00a0 });\r\n<\/pre>\nLastly, we can just add some CSS for design our page template<\/h5>\n
You can purchase your\u00a0hosting from Cloudsurph.com<\/a>,\u00a0Cloudsurph hosting<\/a>\u00a0is a reliable hosting option for business and personal projects. We offer insight and help on system configuration issues and code errors or bugs<\/strong>.<\/em><\/h5>\n
\r\n<style>\r\n\u00a0 \u00a0 \u00a0 \u00a0 body{background: #f1f1f1;}\r\n \u00a0 \u00a0 \u00a0 .title-section h1{font-size:24px;padding-bottom: 10px;line-height: 30px;}\r\n \u00a0 \u00a0 \u00a0 .post-item{\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 background: #fff;\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 color: #000;\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 padding: 10px;\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 margin-bottom: 20px;\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 border-radius: 10px;\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 box-shadow: 5px 5px 3px #aaa;\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 text-align: center;\r\n \u00a0 \u00a0 \u00a0 }\r\n\u00a0 \u00a0 \u00a0 \u00a0 .post-item h2{\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 font-size: 18px;\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 line-height: 24px;\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 border-bottom: 1px solid #ccc;\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 padding-bottom: 10px;\r\n\u00a0 \u00a0 \u00a0 \u00a0 }\r\n\u00a0 \u00a0 \u00a0 \u00a0 .post-item p{\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 font-size:14px;\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 line-height: 20px;\r\n\u00a0 \u00a0 \u00a0 \u00a0 }\r\n\u00a0 \u00a0 <\/style>\r\n<\/pre>\nClICK HERE FOR DOWNLOAD THE FILE >><\/a><\/h3>\n