Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, we’ll introduce the challenge of filtering and paginating our data depending on a user’s search input.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Hi everyone, Travis here.
0:09
Welcome to another practice.
0:11
Today we're going to add a powerful
feature to paginated data,
0:13
search functionality.
0:17
By the end of this practice, you'll be
equipped to allow users to quickly find
0:19
the data they need, saving them precious
time and enhancing the overall experience.
0:23
If you're looking to learn how to paginate
data, check the teacher's notes below for
0:29
a link to a practice
that covers exactly that.
0:33
Say goodbye to endless page navigation!
0:37
Let's implement some
efficient data filtering.
0:40
Go ahead and
launch the workspace below this video or
0:43
download the project files and
open them in your preferred text editor.
0:46
Let's preview what we have
already in the browser.
0:49
As you can see we have some cards
displayed on the page which represent
0:53
authors.
0:57
They're already being paginated so
0:57
we can click through these buttons
here to display the others.
0:59
Our goal for this exercise is to allow
users to utilize this search bar to filter
1:03
the displayed data by the author's names.
1:07
If we open up the js folder,
we'll see two files data.js and script.js.
1:11
Inside data.js is an array of objects
which contains all the author's data.
1:18
Take note that each object
has a property called name.
1:23
Script.js is where we'll
write all of our code.
1:26
On lines 2, 3, and 4, I've already
selected the important elements for you.
1:30
authorContainer is the element we
display all of our author cards in.
1:35
paginationList is the element we display
all of our pagination buttons in.
1:40
And searchInput is our search bar up top.
1:45
Notice line 6,
which is currently commented out.
1:48
This is here for
you if you need it later, but
1:52
this is how we can access all
of our authors from data.js.
1:54
I've linked data.js above
this script in the HTML, so
1:58
it's already accessible here as authors.
2:01
authorsPerPage is a variable that tells
the functions below exactly how many
2:06
author cards we want
displayed on each page.
2:10
Below line 29 is all of the code that
gets what we have so far working.
2:14
This handlePagination function takes in an
array, which is the author's in our case,
2:19
figures out how many pagination buttons we
need, and displays them in the browser.
2:23
This is determined by our
authors per page variable above.
2:29
Also inside this function is our
EventListener for the pagination buttons,
2:33
so that when a user clicks one for
another page, the new data is displayed.
2:37
Further down is our showPage function,
this takes in the same array as
2:43
the previous function, and also a number
representing which page to display.
2:47
Lastly, these two calls at the bottom
are to initialize the page with data.
2:53
If you're curious about how all of this
works, remember to check the teacher's
2:58
notes below for
a link to a practice showing you how.
3:02
You won't need to adjust any of this
code down here for this practice,
3:05
we can write all of our code up here.
3:09
I've provided helpful code comments
to guide you along the way, and
3:12
some hints in there as well.
3:15
This entire exercise consists of one event
listener on our searchInput element.
3:17
So good luck, have fun, and in the next
video I'll show you my solution.
3:22
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up