Up next in 10
Build a Vue 3 Pagination Project to Paginate Multiple Images With Controls Using v-page in TS
Jan 9, 2025
Get the full source code of application here: https://gist.github.com/gauti123456/c8b929760755485e9af2195570eeea40
View Video Transcript
0:01
uh hello guys welcome to this video so
0:03
in this video I will show you yet
0:05
another view3 pagination Library where
0:08
you can Implement front end page ination
0:11
very easily and for this example I've
0:13
taken
0:14
images so we have a series of images
0:17
that I want to display which is coming
0:19
from my assets directory so we have six
0:21
images and we are showing two images per
0:23
page so we are on the first page of the
0:26
pag Nation if you see we can navigate to
0:28
the second page and now the next two
0:30
images will show and same goes which I
0:33
go to the last page the last two images
0:35
will show so we are showing two images
0:38
per page and we also see all these
0:40
pagination controls you can go to the
0:42
first page in the pagination last page
0:45
and we have these three
0:47
pages so the package name is very simple
0:50
I will show you step by step uh if you
0:53
go to npmjs.com just search for this
0:55
package v- page so it's a very simple
1:00
pagination component specifically
1:02
designed for react or vuejs applications
1:05
so it's compatible with the latest
1:07
version which is
1:08
view3 and the command is really simple
1:10
you need to install this by executing
1:13
this command I've already installed it
1:15
it's fairly new package which is having
1:17
236 weekly
1:19
downloads so after you download this you
1:23
need to go to this main.ts file which is
1:26
your main file I'm making this inside
1:29
typescript this view3
1:31
app so right
1:33
here this will be the actual code which
1:36
will be there inside here now we just
1:39
need to add this import statement which
1:42
will be import and pagination
1:48
bar and it will be coming from this v-
1:51
page package and it's almost 7 kilobytes
1:55
pation bar it's a component which is
1:58
coming from this VP
2:00
page library and now we need to register
2:03
it for registering it we will use this
2:05
app. component method and we will
2:08
basically pass this component which we
2:10
are importing pagination
2:15
bar so after registering it this is the
2:18
two lines that you need to add in this
2:19
file first of all import it and then
2:21
register it this component now just
2:24
close this file come to your main file
2:26
which is app. viw file and we have the
2:29
series of images which is present in my
2:31
source directory in my assets directory
2:34
we have six images 1 2 3 4 5 6 so these
2:38
six images I will use for the
2:40
pagination and just go to your VJs file
2:43
right here and now we need to first of
2:46
all make the script Tab and I will set
2:49
the language to be uh
2:52
typescript languages typescript and
2:55
right here we'll be importing the actual
2:59
typescript script and the view package
3:02
reference computed this all will be
3:05
coming from The
3:07
View and then we need to import our
3:11
pagination bar pagination first page so
3:15
all this will be coming from this
3:18
package which is V
3:22
page and here we need to Define our uh
3:26
images we will declare an array here we
3:28
will use the reference right here this
3:31
will contain an array of images and we
3:33
will give two properties to this first
3:36
of all an ID and the path of the image
3:39
source so it is located in the source
3:41
directory as it'ss we are referencing
3:44
the full six images so you need to give
3:46
the path so we declared this images
3:49
array
3:51
and you see this red color icon because
3:54
we haven't used this value that's why
3:56
these error messages are there it will
3:57
be gone once I use this apart from that
4:00
we also need to declare some variables
4:02
for the
4:03
pagination first of all the current page
4:06
and the how many items that you want to
4:08
display per page so we will be
4:10
displaying two images and the current
4:13
page value will be
4:15
one so these two variables and then the
4:18
total rows this can be easily get in the
4:22
pagination by dividing images value do
4:28
length how how many total images that
4:31
you want to show which will be
4:34
six and now I come to the template tag
4:37
so as you all know vue.js comprises of
4:41
three things first is the script then
4:44
the template so here in the HTML you
4:46
will Loop
4:49
through I will just give it a class
4:52
which I call this as image
4:55
gallery and I have given all the source
4:58
code in the description so if you need
4:59
the full source code you can go to the
5:01
description of this video and we'll run
5:03
this simple V for
5:05
Loop and uh image
5:08
in I will just create this paginated
5:11
images property which is a computed
5:13
property I will just and I will also
5:16
give it a key parameter as well which I
5:19
will call
5:20
this which is the image. ID which is a
5:23
unique key and I will attach the source
5:26
property which is located inside image
5:28
source
5:30
that's all that we need to do so now we
5:32
just need to Define this paginated
5:34
images which is a simple computed
5:39
property so this will simply fetch the
5:43
images it will calculate the start index
5:45
and the end index and then return the
5:47
images using the slice function which is
5:49
a JavaScript function and here we are
5:51
passing the starting index and the
5:53
ending index so let's suppose you go to
5:55
the first page of the pagination then it
5:57
will only show the first two images then
5:59
you go to the second page then it will
6:01
show the next two images so this
6:03
property which is a computed property
6:05
paginated images it will calculate the
6:08
images that the user will see once they
6:11
navigate in the pagination so every time
6:14
this property will be called paginated
6:17
images so after this uh if you refresh
6:20
your application uh you will see two
6:23
images displayed so there is two images
6:25
displayed right here and I can even
6:28
style these Imes so what I can do I can
6:31
copy paste the CSS code so I can simply
6:36
copy this just add the style tag after
6:40
this and if you refresh your application
6:43
you will see the two images will be
6:44
styled and it will have a fixed width
6:46
and the height so now there are two
6:48
images displayed so we can even change
6:51
this variable right here let's suppose I
6:53
want to display three images on a single
6:56
page and if I change it you will now see
6:58
three images is displayed right here on
7:00
a single page so you can modify this and
7:04
accordingly the pagination will change
7:06
and after that we will actually show the
7:10
controls the pagination controls so just
7:13
after this div tag we will
7:16
simply have the pagination controls for
7:19
this we will use this pagination bar and
7:22
uh we will provide the V
7:24
model which is our current
7:28
page the total total row which will be
7:32
the variable that we have declared which
7:34
is total rows then we have the page
7:38
size which is items per page that you
7:41
want to display then you also need to
7:44
bind an onchange event handler so
7:45
whenever you change the page
7:49
number you need to specify these are the
7:53
fourth property if you
7:55
see so whenever you change you need to
7:57
bind an on page change I will def Define
8:01
this
8:06
function so WR here in the JavaScript in
8:09
the typescript you can Define this
8:10
function on page change so this data
8:13
will be of type uh page info so we just
8:16
need to import this it will return
8:21
white and inside this function we just
8:23
need to set the current page value to be
8:26
data. page number so whatever is the
8:29
page number we will set it so when the
8:31
page changes by the user this function
8:33
will execute
8:35
so after this uh we will basically show
8:41
all these controls one by one after
8:45
this inside this so you don't need to
8:48
end this so pagination bar so you'll be
8:51
showing this
8:55
pagination first
8:57
page then we have pagination previous
9:01
page so all these controls are built-in
9:04
controls you just need to import
9:09
them so all these controls are pre-built
9:13
inside this package so you just need to
9:16
embed this this is your first page
9:19
previous page pagination numbers will
9:22
show this next page last page so you
9:26
just need to import all these things so
9:28
you just need to add this import lines I
9:31
will just paste it so it will import all
9:33
these
9:35
components so you will see it is coming
9:37
from this package V page and it is we
9:39
have imported all these pagination
9:42
components which are required so if you
9:44
just refresh your application now you
9:46
will
9:47
see we are on the first page and this
9:52
first page is highlighted and you can't
9:54
click the first button you need to
9:57
navigate to the second button the next
10:00
three images will show so only two pages
10:03
are there because a total of six images
10:05
are there so if I change let's suppose I
10:08
back all only want to show two images so
10:11
now three three pages would be there so
10:15
second page third page so in this way
10:17
you can use this package in view three
10:20
to paginate your data it can be anything
10:22
it can be any sort of data images text
10:25
coming from a rest API so specifically
10:28
in this example I'm using images so in
10:31
this way very easily you can uh paginate
10:34
data using this package so thank you
10:37
very much for watching this video and do
10:39
check out my website as well uh free
10:41
mediat tools.com uh which contains
10:44
thousands of tools regarding audio video
10:46
and image and I will be seeing you guys
10:49
in the next video