live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
Build a Vue 3 Pagination Project to Paginate Data From REST API Using vue-awesome-paginate in TS
Jan 9, 2025
Get the full source code of application here:
https://gist.github.com/gauti123456/d1c3de98c182cbe5dd24c5a06ecf9969
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:01
uh hello guys welcome to this video so
0:03
in this video I will show you how to
0:05
implement pagination inside vs using a
0:09
plugin called as view awesome page8 we
0:12
are seeing we are fetching data from a
0:13
rased API Json placeholder API and we
0:17
are showing 10 post per page so we are
0:20
on the first page you see this is our
0:23
first page in the pag nation and same we
0:26
have the second page we can navigate to
0:28
the second page the next 10 post will
0:30
and same goes with the third fourth
0:32
fifth sixth page and we also have these
0:35
controls to go to the last page and the
0:37
first page as well so uh this is
0:40
actually the plugin so if you go to
0:41
npmjs.com just search for this plugin
0:44
view awesome pag in it this is a command
0:47
I've already installed this plug-in so
0:49
it's almost got 8,000 weekly downloads
0:52
so it has got various themes color
0:54
combinations you can see that so now to
0:57
get started first of all you need to go
1:00
to your app main.ts file so we are using
1:03
the latest version which is view3 in
1:06
typescript so just go to your main.ts
1:08
file so first of all here we need to
1:10
register this plug-in so for registering
1:13
it we just need to add this code so all
1:17
the source code guys you can find it in
1:20
the description of this video so I've
1:21
already given all the source code so
1:24
right here first of all you need to
1:25
import this plugin so you simply will
1:28
say import view awesome Paget and this
1:33
will be coming from this Library which
1:35
is view awesome pagit so it's a 35
1:38
kilobyte package and this we have
1:41
imported this plug-in and after that we
1:44
also need to import the CSS file of this
1:46
plug-in as well so we simply say view
1:49
awesome paginate
1:51
/is/
1:53
style.css so this is actually the CSS
1:56
file 187 bytes so you also need to
1:59
import the Cs s file as well alongside
2:01
with the plugin and now we need to
2:03
register it for registering the plug-in
2:05
in view3 we use
2:07
app.use and then we pass the plug-in
2:10
name which is view awesome page in8 so
2:13
these three things you need to do first
2:15
of all import the plugin then the CSS
2:17
file and then the register in the plugin
2:20
now you can close this file move to your
2:22
app. viw file and right here I will show
2:25
you step by
2:26
step so first of all uh in inside our
2:31
typescript so we'll just give it a
2:33
language here because we are developing
2:36
it
2:37
in typescript so we say TS which stands
2:40
for typescript and now here we need to
2:43
fetch the data from the rest API you can
2:46
use any rest API I'm just using Json
2:49
placeholder API and for now we also need
2:54
to use xos here for fetching the data so
2:57
I've already installed xos package so
2:59
just install this xos package as well
3:01
and then we will be declaring a post
3:04
variable which will be empty by default
3:08
it's an contains an empty array of post
3:11
so we have declared this variable which
3:13
is an empty array if uh at the starting
3:17
of the application then we for the
3:18
pagination we will be on the first page
3:21
the current Page by default will be on
3:23
number one so we have declared another
3:25
variable for this and then how many
3:27
items you want to display for the page
3:29
ation so items per page so this I will
3:32
set it to 10 because I need to fetch the
3:35
10 first ports I will be displaying 10
3:38
post per page so you can modify this
3:40
value as well and now we need to write a
3:44
function which I will call
3:46
it I will call this as fetch post and
3:50
this will be a async function and what
3:53
this function will do it will just fetch
3:56
the post from Json
3:58
placeholder so we will simply say exos
4:02
and it contains the get method and we'll
4:05
be using this try catch block so if any
4:07
sort of error take place we will console
4:10
log the error and right here exos
4:13
contains this get method and here we'll
4:16
be passing the
4:17
URL so you'll simply say Json
4:20
placeholder do typo
4:22
code.com
4:25
slost and this will return the post to
4:28
us and after after
4:30
that in the next step so whatever is the
4:33
response coming we will say post. value
4:36
is equal to
4:38
response. data so we are putting this we
4:43
have declared this variable post which
4:44
is an empty array so whatever is the
4:47
response returning we are equaling it to
4:50
that so after we do this after this
4:54
strike CCH
4:57
block now we need to call this function
5:00
we have written this function but we
5:02
haven't called it so now as the
5:04
component
5:05
loads there is a function inside a
5:08
built-in life cycle method which is on
5:11
mounted we already imported this as at
5:14
the top from The View package and it
5:18
will automatically execute this function
5:20
so we here we need to pass this function
5:22
fetch post so now what happens whenever
5:25
your component loads this will execute
5:28
this function so if you try to run this
5:31
application on browser so now what
5:33
happens is that if you check your
5:36
console you will see uh let me just
5:39
console log a line here just say
5:42
here
5:44
response so what you will see this data
5:48
will be returned to us 100 block post or
5:50
post will be returned the response will
5:53
be contained inside this data and 100
5:56
post are returned so now we need to
5:58
paginate them and show 10 post per page
6:02
for doing that now we will write our
6:04
template inside view3 so we'll be using
6:08
simple HTML for this and right here
6:11
we'll be using a unordered list and I
6:14
will be using this director V4 which is
6:17
a directive inside vuejs to Loop through
6:19
the post so this variable
6:23
Post
6:25
in and I need to create this paged post
6:29
this will actually paginate the post for
6:31
us and I will give it a key which is
6:35
post. ID and here we'll be looping
6:39
through each post and we'll be
6:41
displaying the title inside this double
6:43
C bracket the title of the post and in
6:46
the paragraph you will be displaying the
6:49
body of the post so we
6:51
are looping through the these paginated
6:54
post now we need to create this
6:56
paginated post which is a computed
6:58
property inside
7:00
vuejs so now for creating this computed
7:02
property I will just say paginated post
7:05
and for this we have this computed
7:08
function this is not a function this is
7:11
just a property which is computed in
7:12
vue.js
7:14
so here we are defining this computed
7:17
property and what this property will do
7:21
it will actually calculate the starting
7:23
index and the ending index for the
7:25
pagination so for this we will get the
7:28
current page value and we'll subtract it
7:31
minus one this is just some Simple Math
7:34
logic and then we multiplying it by the
7:37
how many items you want to
7:39
display so if you if you are on the
7:42
first page
7:44
then it will be 10 calculated you can
7:48
calculate for yourself this is a
7:50
starting Index this will be zero for the
7:52
first page and then for this ending
7:55
index start plus the items per
8:00
page so 0 + 10 will calculate to 10 so
8:03
this will be zero this will be 10 and
8:06
this will be for the first
8:08
page and in this way now we just need to
8:11
return this post so there is a function
8:14
inside JavaScript to slice to just cut
8:18
the post and return from the starting
8:21
index to ending index so now what
8:23
happens it calculate the post starting
8:26
and the ending index and then it will
8:27
only return zero to 10 post inside this
8:32
so now for displaying the pagination
8:35
controls we outside this unordered list
8:38
we will use this plugin view awesome pag
8:42
in8 and this actually takes some
8:44
parameters first of all the total items
8:47
that you want to display total items
8:49
will be the post length post is an array
8:53
so you calculate the length and then how
8:55
many items you want to display items per
8:58
page this will be calculated inside we
9:01
have declared this variable item per
9:03
page and maximum pages that you want to
9:06
show this is also supported let me say I
9:10
only want to display five
9:13
pages and then if you also want to show
9:17
the ending buttons this is a Boolean
9:18
parameter I will say true and then if
9:21
you want to show the
9:24
breakpoint Val buttons I will
9:27
say false
9:33
so after that we will also be binding
9:35
the current page value for this we'll be
9:37
using the V model directive inside vuejs
9:41
so whatever is your current page so
9:43
these are the different items that we
9:46
pass properties total items of the pag
9:49
ination items per page maximum Pages
9:52
shown so if you try to refresh your
9:54
browser you will see the post will
9:57
display on the screen and at the bottom
10:00
side you will see the paging Nation
10:02
controls let me just if you don't if you
10:05
can't see let me
10:07
just you will see that now these
10:09
pagination controls are showing this is
10:12
your first page we are currently on the
10:15
first page if I navigate to the second
10:17
page the next 10 post will
10:20
show so a total of if you want to
10:23
navigate to the last page this is the
10:25
10th page because we are showing 10 post
10:28
per page that's why it calculated 10
10:30
pages now let's suppose if I change this
10:33
value to five so now what happens uh if
10:36
you refresh now only five posts will be
10:39
displayed 1 2 3 4 5 so now the pages
10:42
will increase which is 20 pages on each
10:45
page we are displaying five post so now
10:48
if you want to style this pagination I
10:50
have provided this uh stylesheet code so
10:53
in the description of this video you can
10:55
find all this
10:56
code so just copy this
10:59
and paste it right
11:02
here so we have just manipulated the CSS
11:06
of that plug-in so built-in classes are
11:09
there paginate buttons where you can
11:11
modify the background color of the
11:12
pagination so now what happens if you
11:15
refresh you will actually see the
11:17
pagination controls also being
11:19
styled so we are on the first page then
11:22
we can navigate to the third fourth page
11:24
so it is highlighting the current page
11:26
value and then we also see the first
11:28
page of the last last page as well
11:30
so in this way guys you can Implement
11:33
pagination in VJs using this plugin
11:35
thank you very much for watching this
11:37
video please hit that like button
11:39
subscribe the channel as well and do
11:41
check out my website as well uh free
11:44
mediat tools.com
11:46
uh which contains thousands of tools
11:48
regarding audio video and image and I
11:51
will be seeing you guys in the next
11:53
video