Pagination Concept using JavaScript

Pagination is basically dividing the entire data into parts of some specific size and showing one part or set of data on one page. To view other set of data we simply change the page.

For Example:
Let say we have a website which shows information of the users.
So, when we make an API request we get data of all the users, if we display all the users data on single page then it is not a good practice thus we use pagination in which we display fixed numbers of users on one page and if we want to see other users the we change the page.

Types of Paginations
There are two ways to do pagination
1). At Client Side -> The example above is client side pagination. In client side pagination we fetch all the data from the server and put pagination logic on client side. But if the dataset is very large then we require large space to store it.

2). At Server Side ->
In server side pagination we put the logic of pagination on the server side and get fixed amount of data from the server itself for every page, but the main issue with server side pagination is calling an API for every page change.

In this blog we look the concept of pagination using Javascript.

Let say we have an array of 20 items
data = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20].
consider this data array the data which we are getting form the Api [Client Side] or the data which is stored in the database[Server Side].

we will try to understand the logic of pagination using this data array.
For pagination we need to have some variables
a). total_no_of_items -> It refers to total number of items, which in this case is 20 [data.length = 20].
b). items_per_page -> Items which we want to be displayed on one page, let say we want 5 items per page.
c). no_of_pages -> It refers in how many pages we can divide our entire data.

In this case

no_of_pages = total_no_of_items / items_per_page
[20 / 5 = 4]
no_of_pages = 4

d). page_number -> The page number which we are currently on.

These are the items which a particular page number will have for the above case

Page 1 -> [1 - 5]
Page 2 -> [6 - 10]
Page 3 -> [11 - 15]
Page 4 -> [16 - 20]

If we are on page_number 3, so we have [11 - 15] displayed.
Let's look at the logic
items_to_skip = (page_number - 1) * items_per_page
[(3 - 1)*5 = 10]
Thus we need to skip 10 items, and we have to show 5 items per page.
So we can do,
items = data.slice(items_to_skip, items_to_skip + items_per_page)
items array will have the items numbered from [11 - 15].

Code

const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

const total_no_of_items = data.length;
const items_per_page = 5;
let no_of_pages = total_no_of_items / items_per_page;
let page_number = 3;

const items_to_skip = (page_number - 1) * items_per_page;
const items = data.slice(items_to_skip, items_per_page + items_to_skip);
console.log(items)

Output

[11, 12, 13, 14, 15]