1
00:00:00,170 --> 00:00:00,560
Okay.

2
00:00:00,560 --> 00:00:03,730
And now let's work on more complex pagination.

3
00:00:03,740 --> 00:00:08,119
Like I said, I will set up everything in the same component.

4
00:00:08,119 --> 00:00:15,340
Please reference the Readme if you need to access the previous approach, the straight up approach and

5
00:00:15,470 --> 00:00:20,030
for starters will actually keep most of the things the same.

6
00:00:20,030 --> 00:00:24,710
So we'll only change here where we iterating over the buttons.

7
00:00:24,710 --> 00:00:27,440
So effectively we will set up a function.

8
00:00:27,440 --> 00:00:34,970
In my case, I'm going to call this render page buttons and in there I'll decide based on the page number

9
00:00:34,970 --> 00:00:40,040
whether I want to display the button or I want to showcase the three dots.

10
00:00:40,490 --> 00:00:44,300
Now, the first thing we want to do is to set up another function.

11
00:00:45,290 --> 00:00:48,230
In my case, I'm going to call this add page button.

12
00:00:48,230 --> 00:00:52,070
So let's go here with const Add page.

13
00:00:52,600 --> 00:00:53,290
Button.

14
00:00:53,290 --> 00:01:02,170
And in here we're looking for object with two properties, page number and the active class.

15
00:01:02,800 --> 00:01:04,989
So let's grab both of these things here.

16
00:01:04,989 --> 00:01:11,530
And then as far as what we want to return from this function, let's scroll down and remember when we

17
00:01:11,530 --> 00:01:14,590
were iterating over, we were setting up the button.

18
00:01:14,590 --> 00:01:17,770
So basically just grab this code.

19
00:01:17,950 --> 00:01:20,770
So take it out, navigate up.

20
00:01:20,830 --> 00:01:24,420
So from add button, this is what we want to return.

21
00:01:24,430 --> 00:01:28,300
And the only thing we need to change is this line of code.

22
00:01:28,300 --> 00:01:34,090
So instead of page number equals to a current page, let's remove both of them.

23
00:01:34,240 --> 00:01:39,640
And let's say if the active class is present, then we'll display the active one.

24
00:01:39,730 --> 00:01:44,350
Then like I said, we'll have a function render page button.

25
00:01:44,350 --> 00:01:49,060
So let's go here with const render page buttons.

26
00:01:49,180 --> 00:01:53,620
That's going to be my function and instead of iterating over the pages.

27
00:01:54,360 --> 00:01:55,950
Will actually invoke it.

28
00:01:55,950 --> 00:01:59,490
So for starters, let's go with const page buttons.

29
00:01:59,490 --> 00:02:06,620
So inside of the function we are creating the array, and from this function we want to return the array.

30
00:02:06,630 --> 00:02:12,750
Now of course there's going to be more conditions and based on those conditions, we'll add the buttons

31
00:02:12,750 --> 00:02:13,980
inside of that array.

32
00:02:13,980 --> 00:02:18,030
But for now we want to go with return and then page buttons.

33
00:02:18,030 --> 00:02:25,500
So now let's scroll down and essentially where we're iterating over inside of the button container,

34
00:02:25,500 --> 00:02:28,080
I just want to call a render page buttons.

35
00:02:28,080 --> 00:02:33,120
So let me go back to the JavaScript land and of course the S is missing.

36
00:02:34,080 --> 00:02:35,460
So let me go here.

37
00:02:35,460 --> 00:02:36,090
Buttons.

38
00:02:36,090 --> 00:02:41,190
And if everything is correct, we should have no buttons over here because of course, we're just returning

39
00:02:41,190 --> 00:02:42,330
empty array.

40
00:02:42,720 --> 00:02:49,530
And effectively I chose the approach where I'm just going to have quite a few if statements and based

41
00:02:49,530 --> 00:02:54,570
on the result, either I'm going to add those three dots or there's going to be actually a button.

42
00:02:54,780 --> 00:02:58,710
And let's start by adding the button for the first page.

43
00:02:58,710 --> 00:03:03,360
So this is something that I always want to display and therefore I'm going to go with page buttons.

44
00:03:03,360 --> 00:03:10,590
Now, since this is an array I can go with Push and then inside of the push I'm going to invoke add

45
00:03:10,590 --> 00:03:11,580
page button.

46
00:03:11,580 --> 00:03:15,300
Now remember, what is the result that we're returning from?

47
00:03:15,690 --> 00:03:16,740
Add page button?

48
00:03:16,740 --> 00:03:18,990
Well, it's the actual button, right?

49
00:03:18,990 --> 00:03:22,260
So here we can go with add page button.

50
00:03:22,260 --> 00:03:23,490
We want to invoke it.

51
00:03:23,490 --> 00:03:30,720
But then remember, we need to say what is the page number and also what's the status with the active

52
00:03:30,720 --> 00:03:31,290
class?

53
00:03:31,290 --> 00:03:36,000
So as far as the page number, well, it's the button for the first page.

54
00:03:36,000 --> 00:03:38,310
So I'll say page number is equal to one.

55
00:03:38,310 --> 00:03:42,090
And as far as the active class, well, that depends on the current page.

56
00:03:42,090 --> 00:03:48,270
So let's go here with active class and let's set it equal to current page is equal to one.

57
00:03:48,270 --> 00:03:49,590
So if.

58
00:03:50,390 --> 00:03:51,830
The current page is equal to one.

59
00:03:51,830 --> 00:03:55,800
Then of course we'll have different styles since we have over here this active class.

60
00:03:55,820 --> 00:03:58,200
So now let's navigate back and check it out.

61
00:03:58,220 --> 00:03:59,960
Now we have our first button.

62
00:03:59,990 --> 00:04:01,980
Okay, that's an awesome start.

63
00:04:02,000 --> 00:04:07,610
So now let's navigate back to our render page buttons and add the last one.

64
00:04:07,880 --> 00:04:10,490
And again, the logic is going to be almost the same.

65
00:04:10,490 --> 00:04:11,680
The only difference.

66
00:04:11,860 --> 00:04:14,610
But of course, we'll change these values over here.

67
00:04:14,630 --> 00:04:16,430
So let me copy and paste.

68
00:04:16,430 --> 00:04:22,940
And yes, since we are invoking this code right after the first one, JavaScript is going to read everything

69
00:04:22,940 --> 00:04:23,630
line by line.

70
00:04:23,630 --> 00:04:27,990
So once we add the first one, we can also nicely right away add the last one.

71
00:04:28,010 --> 00:04:30,110
Now what is going to be the page number?

72
00:04:30,110 --> 00:04:31,550
Well, number of pages.

73
00:04:31,550 --> 00:04:36,530
And when it comes to the active one in this case I want to go with current page equals to number of

74
00:04:36,530 --> 00:04:37,160
pages.

75
00:04:37,160 --> 00:04:39,490
So let's set it equal to number of pages.

76
00:04:39,500 --> 00:04:45,590
You know, let me close the sidebar over here just so I have more real estate and check it out since

77
00:04:45,590 --> 00:04:49,250
I over here have 32 jobs, I have four pages.

78
00:04:49,250 --> 00:04:54,510
So now I nicely display the first one and the last one.

79
00:04:54,990 --> 00:04:55,410
All right.

80
00:04:55,410 --> 00:05:00,420
And once we have the first one and the last one, now here comes the interesting part, where we want

81
00:05:00,420 --> 00:05:01,800
to set up the current page.

82
00:05:01,800 --> 00:05:07,690
We want to set up one before current page and one after and also some dots in between.

83
00:05:07,710 --> 00:05:13,830
Now, I will go back to all just because I want more pages to work with again.

84
00:05:13,830 --> 00:05:19,410
At the moment we only have one and then since we're not displaying any more buttons, so let's navigate

85
00:05:19,410 --> 00:05:21,780
over here and let's start with the current button.

86
00:05:21,780 --> 00:05:29,010
So I'm going to say here current page and effectively, for starters, let's just try out this approach.

87
00:05:29,010 --> 00:05:35,460
So essentially I'm going to go with page buttons Push and yes, during this video I'll be extremely

88
00:05:35,460 --> 00:05:40,050
annoying, even more annoying than I'm usually am, and I will keep repeating that.

89
00:05:40,050 --> 00:05:47,190
Placement is important because JavaScript is reading the code top to bottom, so please place it in

90
00:05:47,190 --> 00:05:50,640
between the first one and the last one.

91
00:05:50,640 --> 00:05:52,830
And the same is going to be for rest of the buttons.

92
00:05:52,830 --> 00:05:58,150
Please keep the same placement, otherwise your functionality is going to go bananas.

93
00:05:58,150 --> 00:06:03,100
So in here, as far as the page number, well let's go with the current page.

94
00:06:03,100 --> 00:06:07,870
And remember, when it comes to the current page, we always want the current page to be active.

95
00:06:07,870 --> 00:06:08,440
Correct.

96
00:06:08,440 --> 00:06:13,570
So in here I'll just hard code and I'll say equal to true, let's save it.

97
00:06:13,570 --> 00:06:15,790
And now let's notice something interesting.

98
00:06:15,790 --> 00:06:19,240
So I have two buttons that display.

99
00:06:19,240 --> 00:06:20,710
Number one, Why?

100
00:06:20,710 --> 00:06:27,040
Well, because I have a button already for page number one, but it comes out that the current page

101
00:06:27,040 --> 00:06:32,410
is also page number one, and the same is going to be with the last page.

102
00:06:32,500 --> 00:06:33,520
So.

103
00:06:34,030 --> 00:06:37,870
In order to fix it, we'll actually place this one in the condition.

104
00:06:37,870 --> 00:06:39,850
So how is that going to look like?

105
00:06:39,940 --> 00:06:51,430
I'll say if the current page is not equal to one and if the current page is not equal to the number

106
00:06:51,430 --> 00:06:55,990
of pages only, then add this particular button.

107
00:06:55,990 --> 00:06:59,100
So essentially we just add it conditionally.

108
00:06:59,110 --> 00:07:01,270
So let me move up this code.

109
00:07:01,300 --> 00:07:04,620
And now once we navigate back notice, everything is fine.

110
00:07:04,630 --> 00:07:10,660
So if, for example, we'll have the active page as the last one, we won't display the current one.

111
00:07:10,660 --> 00:07:17,740
Now if our active one, for example, is going to be any of the pages between the first one and the

112
00:07:17,740 --> 00:07:20,590
last one, then of course everything is going to be correct.

113
00:07:20,620 --> 00:07:22,540
Hopefully that is clear.

114
00:07:22,540 --> 00:07:28,840
So now let's do the same thing with one before and one after And before we write any code, I just want

115
00:07:28,840 --> 00:07:30,130
to repeat one more time.

116
00:07:30,130 --> 00:07:32,140
This is totally up to you.

117
00:07:32,140 --> 00:07:36,680
I chose the approach where I set up one before and one after.

118
00:07:36,710 --> 00:07:39,830
You don't have to if you just want to display the dots.

119
00:07:39,860 --> 00:07:42,400
That's totally reasonable approach.

120
00:07:42,410 --> 00:07:47,450
Now, as far as the one before and one after, we'll also have some conditions.

121
00:07:47,450 --> 00:07:50,470
So one before what conditions we're going to use.

122
00:07:50,480 --> 00:07:56,420
Well, here I'm going to go if and then current page is not equal to one.

123
00:07:56,630 --> 00:08:03,530
So pretty much same deal if it's equal to one that I don't want to display one before because there's

124
00:08:03,530 --> 00:08:04,640
really no need.

125
00:08:04,670 --> 00:08:09,860
And also I don't want to display this button if the current page is equal to two.

126
00:08:09,890 --> 00:08:16,040
So let me add over here and operator, we're going to go with current page is not equal to two.

127
00:08:16,790 --> 00:08:19,700
And then we want to grab the page buttons.

128
00:08:19,940 --> 00:08:21,740
Probably we can copy and paste.

129
00:08:21,770 --> 00:08:22,460
Next time.

130
00:08:22,460 --> 00:08:29,420
And then when it comes to the page number, we want to go over here, current page minus one because

131
00:08:29,420 --> 00:08:32,480
this will be one before current page.

132
00:08:32,750 --> 00:08:37,460
And when it comes to active class, it will always be false over here.

133
00:08:37,460 --> 00:08:40,309
So now let's navigate back over here and notice.

134
00:08:41,100 --> 00:08:43,470
In this case I am displaying four.

135
00:08:43,500 --> 00:08:50,160
However, if I'm going to go all the way down to page number two, I'm not displaying anymore this button.

136
00:08:50,160 --> 00:08:56,850
So at the moment I have only the first one, the current one, and of course the last one.

137
00:08:56,880 --> 00:08:59,790
So now let's do the same thing with one after.

138
00:08:59,790 --> 00:09:03,870
And you can probably already guess that we'll have some conditions there as well.

139
00:09:03,870 --> 00:09:07,140
So let me copy this one again, placement is important.

140
00:09:07,140 --> 00:09:12,030
If this is the current page, please place it right after the current page.

141
00:09:12,030 --> 00:09:16,380
And when it comes to conditions, the logic is almost the same.

142
00:09:16,380 --> 00:09:19,170
But now we're looking to the end of array.

143
00:09:19,170 --> 00:09:21,810
Basically, we're looking for the number of pages.

144
00:09:21,810 --> 00:09:28,830
So here I'll say if the current page is not equal to number of pages, basically it's not the last one

145
00:09:28,920 --> 00:09:32,970
and it's also not the one before last one.

146
00:09:33,000 --> 00:09:34,080
Hopefully that makes sense.

147
00:09:34,080 --> 00:09:41,370
So we're looking for not equals to and we want to go with number of pages minus one.

148
00:09:41,380 --> 00:09:45,160
Now as far as these values is going to be current page.

149
00:09:45,560 --> 00:09:46,550
Plus one.

150
00:09:46,550 --> 00:09:50,030
And again, active class is going to stay false.

151
00:09:50,060 --> 00:09:51,080
Now, you know what?

152
00:09:51,080 --> 00:09:54,490
I think I need to add some comments over here.

153
00:09:54,500 --> 00:09:56,510
So first page.

154
00:09:57,280 --> 00:10:04,420
Then I'll say one before current page and then let's grab the comment here.

155
00:10:04,720 --> 00:10:08,110
We'll say one after current page.

156
00:10:08,380 --> 00:10:09,200
Let's save it.

157
00:10:09,220 --> 00:10:10,330
Let's navigate.

158
00:10:10,330 --> 00:10:12,580
And it looks like there's some kind of bug.

159
00:10:12,940 --> 00:10:14,260
Nope, everything is correct.

160
00:10:15,080 --> 00:10:16,840
That was probably just some kind of glitch.

161
00:10:16,850 --> 00:10:23,120
So now let's navigate notice once I get to the page number three, I'll have two and four.

162
00:10:23,120 --> 00:10:28,550
And pretty much that continues all the way up to the eight.

163
00:10:28,550 --> 00:10:34,190
And then once we get to nine, then of course, I'm not displaying the page that's coming after the

164
00:10:34,190 --> 00:10:37,940
current page because I mean I already have the last one.

165
00:10:37,940 --> 00:10:39,350
Hopefully that is clear.

166
00:10:39,350 --> 00:10:42,170
And then lastly, we want to add those dots.

167
00:10:42,170 --> 00:10:49,940
And when it comes to dots in my setup, I'm going to add them before this setup where we have these

168
00:10:49,940 --> 00:10:55,160
three buttons and I'm also going to add them after those three buttons.

169
00:10:55,160 --> 00:10:57,710
But again, we're going to use some conditions.

170
00:10:57,740 --> 00:11:03,940
Notice if the current page is four, then I have three and five correct.

171
00:11:03,950 --> 00:11:10,130
However, if my current page is three, I already have two and I also have one.

172
00:11:10,220 --> 00:11:14,110
So there's really no point to place the dots over here.

173
00:11:14,120 --> 00:11:21,240
Now we will still set up dots one after the current page, but not the one before.

174
00:11:21,270 --> 00:11:26,520
I know that this naming might seem a little bit confusing, so just bear with me.

175
00:11:26,520 --> 00:11:28,560
Let's navigate here again.

176
00:11:28,560 --> 00:11:33,840
Placement is extremely important and we want to set up the condition.

177
00:11:33,960 --> 00:11:36,510
And also note I'm going to go here with dots.

178
00:11:36,840 --> 00:11:42,780
So as far as the condition, like I said, we're going to only add them if the current page is more

179
00:11:42,810 --> 00:11:48,870
than three because like you just saw, there's really no point if it's not the case.

180
00:11:48,900 --> 00:11:51,510
Now, in this case, let's just hard code.

181
00:11:51,510 --> 00:11:54,900
So essentially, I'm not going to set up a separate function for that.

182
00:11:55,020 --> 00:11:57,960
I'm just going to go with page buttons, push.

183
00:11:58,290 --> 00:12:01,410
Then inside of it we want to add the span.

184
00:12:01,410 --> 00:12:03,810
So let me set up the element over here.

185
00:12:04,350 --> 00:12:05,970
Let's add some classes.

186
00:12:06,000 --> 00:12:08,410
We're looking for page hyphen BTN.

187
00:12:08,430 --> 00:12:10,290
Something we're going to style, of course.

188
00:12:10,290 --> 00:12:11,580
Then dots.

189
00:12:11,790 --> 00:12:12,680
As far as the key.

190
00:12:12,690 --> 00:12:18,210
Well, let's just go with dots and set it equal to one.

191
00:12:18,330 --> 00:12:21,950
And then in here we'll just type some dots.

192
00:12:21,960 --> 00:12:22,680
That's it.

193
00:12:23,130 --> 00:12:26,820
There's really not much we need to do once we navigate back.

194
00:12:26,820 --> 00:12:30,330
Notice the current page is not bigger than three.

195
00:12:30,390 --> 00:12:30,840
Correct.

196
00:12:30,840 --> 00:12:33,210
So of course we don't see the dots.

197
00:12:33,210 --> 00:12:38,550
However, once I navigate to four now, I nicely display the dots here as well.

198
00:12:38,730 --> 00:12:47,550
And the same is going to be for the dots at the end of my three active buttons, let me call them that.

199
00:12:47,550 --> 00:12:50,100
Maybe that makes a little bit more sense.

200
00:12:50,130 --> 00:12:52,380
Only in this case, of course, the.

201
00:12:53,150 --> 00:12:55,100
Logic is going to be a little bit different.

202
00:12:55,130 --> 00:13:02,540
We're going to be looking for current page is less than num of pages and again, we're looking for minus

203
00:13:02,540 --> 00:13:03,080
two.

204
00:13:03,110 --> 00:13:09,830
So basically, if the current page is all the way up to the end of array, we already have this button

205
00:13:09,830 --> 00:13:12,920
in place, we already have the last button.

206
00:13:12,920 --> 00:13:19,250
So there's really no point to display the dots as far as the values over here, this stays the same.

207
00:13:19,250 --> 00:13:23,180
We just want to go here with dots and plus one.

208
00:13:23,180 --> 00:13:28,220
So now let's navigate back and then notice again, this is going to be dynamic.

209
00:13:28,220 --> 00:13:31,550
Basically, it's going to be based on our pages.

210
00:13:31,550 --> 00:13:38,060
So once I get to the current page eight, there's really no point to showcase those dots because I have

211
00:13:38,060 --> 00:13:45,020
one after and then I have the last one and the same goes if I navigate pretty much all the way down

212
00:13:45,020 --> 00:13:45,560
here.

213
00:13:46,260 --> 00:13:51,890
If I go all the way to three again, there's really no point to set up the dots.

214
00:13:51,900 --> 00:13:56,070
And with this in place, we're done with the more complex pagination setup.