Up next in 10
Build a React.js rc-pagination Library to Implement Pagination of Data With Controls in JSX
Jan 9, 2025
Get the full source code of application here:
https://gist.github.com/gauti123456/afa292ca539125cb6e6b3b4859acb652
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you yet
0:04
another react CH package for
0:06
implementing front end pation inside
0:09
your react CH application so there is a
0:11
package called as rc- pagination so we
0:15
have a series of items if you see uh if
0:18
I refresh the page I am on the first
0:21
page in the pagination and I am
0:23
displaying 10 items per page so if I
0:25
navigate to the second page the next 10
0:27
items will show from 11 to 20
0:30
same goes with the third fourth fifth
0:32
page so 10th page is the last page so
0:36
all these pagination controls will
0:38
previous page next page will show so I
0:41
will show you how to integrate this
0:43
package directly inside react CH so
0:47
first of all if you go to npmjs.com you
0:49
just need to search for this package
0:51
which is
0:53
rc-
0:56
pagination so this is the pagination UI
0:59
comp component for react uh I've already
1:02
installed it this is the command so it's
1:05
almost having over 1 million weekly
1:07
downloads a pretty popular package for
1:10
pagination so all the source code is
1:14
given in the description of this video
1:16
so just make a simple functional
1:18
component and then we just need to first
1:21
of all import this package by using the
1:23
import statement so we say import
1:26
pagination from rc- pagination
1:30
so once you import this we also need to
1:32
import the CSS file of this package as
1:35
well so which is located in the assets
1:39
index.css
1:40
so we import the package as well as the
1:43
CSS file as well so now in the app here
1:48
we need to declare some State
1:50
variables so first of all we need to
1:52
keep track of the current
1:55
page so initial value will be
1:58
one so when you load your application it
2:01
you will be on the first page and then
2:03
we also need to configure how many items
2:06
you want to display per page so I will
2:08
say
2:09
10 and then the total items so I will
2:13
say 100 so these are some static
2:16
variables you can change it
2:18
accordingly to your pagination needs and
2:22
now we will be having we will generate
2:25
100
2:26
items so this these items can be coming
2:29
from an API or you can fetch these items
2:32
from database I'm for for the sake of
2:35
this example I'm just generating this by
2:38
using this function which is array
2:42
from so this will generate items
2:45
starting from 1 to 100 and store it in
2:48
the this data variable so this data will
2:51
be an array containing 100
2:56
items so now to display this pagination
2:59
we come to to the GSX and right here we
3:03
first of
3:04
all give it a padding of 20 pixel and
3:08
inside this H1 we say pagination
3:11
example with RC
3:14
pagination and then we Loop through
3:17
inside
3:18
here unordered list here and right here
3:22
we
3:25
say current
3:28
items so this current items we need to
3:31
Define here because we haven't defined
3:34
this current
3:42
items so here we need to pass the key
3:45
here which will
3:46
be so these current items if you
3:50
see it is not defined here current items
3:54
will be the
3:56
items where we will slice the array
4:00
based upon the page number so we have
4:03
the slice function available in
4:05
JavaScript if you want to slice a array
4:08
so you'll be slicing this array based
4:10
upon the current page
4:14
value so essentially what what the this
4:18
current items will return based upon
4:20
which page number you are if you are on
4:23
first number page then it will return
4:25
items starting from 1 to 10 so this is a
4:28
simple formula here
4:30
mathematical formula for getting these
4:32
items automatically based upon the
4:34
current page number so this current page
4:37
number will change accordingly with
4:39
pagination so if you navigate to the
4:41
second page this current page value will
4:43
become two so 2 minus 1 1 multiplied by
4:47
10 so then the starting index will be 10
4:51
and then it will be
4:52
20 so automatically these current items
4:55
will change so if you just refresh your
4:58
application now you you will see the
5:00
first 10 items being displayed because
5:02
we are on the first
5:04
page
5:07
so now if I change this value here items
5:10
for page to five so now what happens
5:13
only five items will
5:15
display so this
5:17
is automatic here you can change this
5:20
value so I will stick to 10 so now we
5:23
show the pagination controls out there
5:25
after this UL I will use this component
5:28
pagination
5:30
and this takes some arguments here first
5:32
of all the current
5:35
page we have this variable then the
5:38
total this will be the total items and
5:41
then the page size this will be items
5:44
per page so we have variables for all
5:47
these parameters
5:50
declared and uh lastly whenever you
5:53
click on any individual page number this
5:56
on change event handler will be executed
5:59
so I will just bind this call back
6:01
function on page
6:03
change so whenever you click on any
6:06
individual page number we will change
6:08
the current page
6:10
value by calling this hook
6:13
function so this completes the
6:15
pagination here you will now see uh the
6:18
pagination controls will appear and we
6:20
are on the first page here the first 10
6:23
items are showing right here and if I
6:25
navigate to the second page the next 10
6:27
items from 11 to 20 will appear
6:30
and same goes with the third fourth page
6:33
so in this way you can configure the
6:35
pagination using this plugin it's very
6:38
simple you import the package so I've
6:42
shown you this complete example so if
6:44
you need the source code the link is
6:46
given in the
6:47
description so thank you very much for
6:50
watching this video and do check out my
6:52
website as well uh free mediat tools.com
6:55
uh which contains thousands of tools
6:58
regarding audio video nhh and I will be
7:01
seeing you guys in the next video
#Programming
#Software