Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice Filtering Paginated Data!
You have completed Practice Filtering Paginated Data!
Preview
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