Build a Dynamic Pagination utility with JavaScript

Build a Dynamic Pagination utility with JavaScript

In this article , I want to share another experimental story about dynamic pagination rendering.

I had to build a pagination module in a project. I examined lots of pagination libraries but these were so over-engineered compared to the product team’s requirements. I decided to build it on my own to make it simpler and easier to implement. Indeed, this widget implemented lots of different projects all around the production environment which has more than 50 million users per month and It works like a charm

Let me list the requirements we got from the product team:

  • We have a dynamic amount of elements

  • We want to show them dynamically per widget. e.g, while one widget is listing 10 of the elements per page another widget, may list 15 of the elements.

  • If it’s at the first or the latest page the arrow navigation buttons should be disabled, If the user clicks the active page it shouldn’t trigger anything, as well.

  • If we have more than 4 pages after the calculation regarding specs described below we need to show the latest page and show a button with three points. Here is the preview:

This is image title

It has to look like this, at the end of the pagination:

This is image title

Let’s look at the working demo, first:

It’s enough to give so much information. Let’s get our hands dirty:

First thing first, my little component should have a state which affects the rendering of it.

const pagingOptions = {
  totalCount: 40,// Total content count
  itemPerPage : 5, // How many items will be showed per page
  initialPage: 1, // Initial Page (We can set this parameter by detecting current page from query string)
  get totalPage () { // Calculating total page count
     return Math.ceil(this.totalCount / this.itemPerPage) // I'm using Math.ceil for ceiling 
  },
  location: ".paging", // It's the selector to render pagination component
  url : "/api/contents/?id=5a5e47ec7152d929bc6d4280&p=" // The url address which will be requested after each page changed.
}

It was a .net framework web application that’s why I can init my function inside the razor.

paging.init(pagingOptions);

I love to stick with Single Responsibility principle while coding so I want to list my functions before digging into the details:

This is image title

It’s also possible to merge handleNextClick and handlePrevClick functions but as I mentioned before this is just a POC. There may be so many points to improve inside the codebase. Please feel free to recommend better ways.

Let’s dig into the details. I’m passing down the current state using the init function. This is the function triggered each time when the page changed so I do request content part within this function

This is image title

I want to mention one important method before I tell you about the createPaging method createButton. This method takes some parameters and helps me build each button regarding these parameters:

This is image title

And finally one big, “dirty” method createPaging. I call it dirty just because it has so many conditions. I examined lots of pagination libraries and as far as I see, almost all of them have this kind of conditions. I do not want to show whole code here not to make you confused so I named the variables clearly to your debug.

Happy Coding !

  • This article has been originally written and published by Murat Dogan at Medium

javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

Data Types In JavaScript

JavaScript data types are kept easy. While JavaScript data types are mostly similar to other programming languages; some of its data types can be unique. Here, we’ll outline the data types of JavaScript.

JavaScript Memory Management System

The main goal of this article is help to readers to understand that how memory management system performs in JavaScript. I will use a shorthand such as GC which means Garbage Collection. When the browsers use Javascript, they need any memory location to store objects, functions, and all other things. Let’s deep in dive that how things going to work in GC.

Create a Line Through Effect with JavaScript

In this post we are going to create an amazing line through effect, with help of CSS and lots of JavaScript. So, head over to your terminal and create a folder LineThroughEffect. Create three files -index.html, main.js and styles.css inside it.

Grokking Call(), Apply() and Bind() Methods in JavaScript

In this article, we will have a look at the call(), apply() and bind() methods of JavaScript. Basically these 3 methods are used to control the invocation of the function.