videocam_off
This livestream is currently offline
Check back later when the stream goes live
Up next in 10
Build a Vue.js 3 Pagination of Data From REST API Using Axios & vuejs-paginate-next in TypeScript
Jan 9, 2025
Get the full source code of application here:
https://gist.github.com/gauti123456/605988a5ff8f887c537a34af08906c9d
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 vuejs pagination package which
0:07
is called as VJs paginate next so with
0:10
the help of this we will make a very
0:11
simple app where we fetch the data from
0:13
a rest API which is Json placeholder API
0:17
and we display 10 post per page so we
0:20
will see these pagination controls right
0:22
here we on the first page we are showing
0:24
10 post we can navigate to the second
0:27
page fourth page previous page next page
0:29
all these pagination controls I will
0:31
show so I have given all the source code
0:34
in the description of this video so what
0:36
source code I will use so now to get
0:39
started you need to install this module
0:41
so
0:42
simply execute this command and it's
0:44
almost got 5,000 weekly downloads so now
0:49
to get started we will inside our view
0:52
file which is app. view we will start
0:55
writing the
0:57
code so first of all uh as as you all
1:00
know vuejs components comprise of three
1:03
things first of all your script code and
1:06
we'll be using typescript for this so
1:09
the language here will be not JavaScript
1:12
which is typescript which is a superet
1:15
of JavaScript so for this we just need
1:18
to first of all import
1:22
the reference on mounted and computed so
1:26
all this will be coming from the base
1:28
view package and for this we also need
1:31
the xos package as well so you need to
1:33
import that as well and then we'll be
1:35
importing this actual component Paget
1:39
which will be coming from
1:43
vuejs Paget next so now we need to
1:48
declare some
1:50
variables so these variables will be
1:53
for if you
1:56
see number of post which will be an
1:58
array here if you load the application
2:01
we'll be storing these post which
2:03
will'll be fetching from the API we have
2:06
declared post here then we have the
2:08
current page which will be number one
2:10
and items per page we are displaying 10
2:12
items per page so we have declared these
2:15
three variables now we come to the
2:18
template part so we declare the
2:25
template so inside the template you will
2:28
actually have an un uh unordered list
2:32
and inside this list tag we will use the
2:35
V for Loop and we Loop through this
2:39
pagate post this will be coming
2:43
from so here you'll be having the title
2:47
and the body of the
2:50
post so first of all we need to fetch
2:53
data from the API and then we need to
2:56
paginate that so we will first of all
3:00
will basically call this unmounted
3:03
function and whenever vuejs
3:07
application we will fetch the data and
3:09
for this we have binded this function
3:11
which is useful for fetching the data
3:14
from that
3:15
API so ENT essentially this function
3:18
will be responsible we are here using
3:20
exos to fetch
3:22
data so it's a very simple fetch call to
3:25
Json placeholder API so this Returns the
3:28
actual value and we are putting the
3:30
response here which is post.
3:32
value so we have declared just move
3:36
these three variables that we
3:40
declared so we are storing the post here
3:42
which are coming in this variable
3:45
now we need to create this paginated
3:47
post so this is also will be a computed
3:52
property it's not a function it's a
3:54
computed property in vue.js so which
3:57
will be Computing this paginated post
4:01
for every page in the pagination so if
4:03
you are on the first page then it will
4:06
only get the first 10 post so for this
4:10
we are using the slice function of
4:12
JavaScript to only return the first 10
4:14
post and then if you go to the second
4:17
page the next 10 post will be there so
4:19
this property is responsible for that so
4:23
if you refresh your application you will
4:24
see the first 10 posts will be
4:27
there so if I change this this value
4:30
let's suppose I only want two post now
4:33
you only see two post
4:38
appearing in this way you can Implement
4:41
pagination let me change it to five post
4:43
per page and now to show those
4:46
pagination controls just after this
4:48
unordered list we show the
4:51
component which is
4:56
paginate and it actually takes some
4:59
parameters
5:00
which we need to pass which is page
5:05
count so here we'll be calculating the
5:08
total number of pages by dividing the
5:11
number of
5:13
post items per page so if you want to
5:16
show let's
5:17
suppose total 10 100 posts are there so
5:20
you'll divide this by total items that
5:23
you want to show per page which is 10 or
5:25
five so then it will give you the total
5:28
number of pages for the paging and then
5:30
we'll be also be binding and click
5:32
Handler so whenever you click on a
5:34
individual page you will bind this
5:37
function handle page
5:39
change and then you'll also be
5:43
having the previous button so you'll
5:45
simply say previous next you can even
5:48
give it a custom
5:50
class to this pag Nation so we will have
5:53
all these
5:55
attributes so now we just need to Define
5:58
this handle page change so when whenever
5:59
you click on a particular page number in
6:03
the pagination so we just need to set it
6:06
to the current
6:08
page in this so we have this variable
6:11
current page initial value is one but
6:14
when we click to any page number we are
6:16
setting this current page to whatever
6:18
page number it's
6:20
passed so now I think you will see the
6:23
page numbers appearing if you see this
6:25
is previous here on the first page if
6:27
you click second the page number numbers
6:29
will appear a total of 20 pages are
6:32
there on each page we are showing five
6:34
post if you want to style it you can add
6:38
CSS code I have given the full source
6:40
code so you can add this style tag and
6:44
just add the CSS styles to style your
6:49
pagination so once you add this you will
6:53
see if you refresh it will look
6:56
something like
6:58
this so nice little pagination controls
7:01
are there you will see that so previous
7:04
next buttons are also
7:07
there so you can use this package very
7:09
easily inside view3 uh I have given all
7:12
the source code in the description of
7:13
this video so thank you very much for
7:16
watching this video and do visit my
7:18
website as well free mediat tools.com uh
7:21
which contains thousands of tools
7:23
regarding audio video and image and I
7:26
will be seeing you guys in the next
7:28
video