Javascript Table Pagination With Search enhances the user experience when dealing with large datasets displayed in tables. It allows users to quickly find specific information through search functionality and navigate through the data using pagination, breaking it down into smaller, more manageable chunks. This tutorial will guide you through creating this functionality step by step.
Creating the HTML Structure
First, we’ll set up the basic HTML structure for our table and pagination. This will include the necessary elements to display student data, a search bar, and pagination controls.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Students</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/design.css">
</head>
<body>
<div class="page">
<div class="page-header cf">
<h2>Students</h2>
</div>
<ul class="student-list">
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/67.jpg">
<h3>iboya vat</h3>
<span class="email">iboya.vat@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 07/15/15</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/75.jpg">
<h3>aapo niskanen</h3>
<span class="email">aapo.niskanen@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 06/15/12</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/34.jpg">
<h3>phillip cox</h3>
<span class="email">phillip.cox@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 09/11/14</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/38.jpg">
<h3>zilda moreira</h3>
<span class="email">zilda.moreira@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 07/15/15</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/23.jpg">
<h3>lilou le gall</h3>
<span class="email">lilou.le gall@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 06/16/13</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/94.jpg">
<h3>lucy hall</h3>
<span class="email">lucy.hall@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 09/11/16</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/24.jpg">
<h3>mark colin</h3>
<span class="email">mark.colin@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 01/14/14</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/14.jpg">
<h3>sara alves</h3>
<span class="email">sara.alves@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 07/19/16</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/49.jpg">
<h3>ramon macrae</h3>
<span class="email">ramon.macrae@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 05/13/12</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/15.jpg">
<h3>connor taylor</h3>
<span class="email">connor.taylor@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 05/18/14</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/11.jpg">
<h3>aymeric morel</h3>
<span class="email">aymeric.morel@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 06/13/13</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/49.jpg">
<h3>lorenz otto</h3>
<span class="email">lorenz.otto@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 05/11/14</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/29.jpg">
<h3>karl williamson</h3>
<span class="email">karl.williamson@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 01/12/14</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/34.jpg">
<h3>ouassim heering</h3>
<span class="email">ouassim.heering@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 01/18/12</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/91.jpg">
<h3>roberto molina</h3>
<span class="email">roberto.molina@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 06/13/15</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/28.jpg">
<h3>jordan hubert</h3>
<span class="email">jordan.hubert@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 06/13/15</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/29.jpg">
<h3>melvin baker</h3>
<span class="email">melvin.baker@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 09/18/14</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/26.jpg">
<h3>everett gordon</h3>
<span class="email">everett.gordon@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 06/17/15</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/82.jpg">
<h3>aiden ma</h3>
<span class="email">aiden.ma@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 07/18/12</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/62.jpg">
<h3>florent gerard</h3>
<span class="email">florent.gerard@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 02/12/13</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/96.jpg">
<h3>amber chen</h3>
<span class="email">amber.chen@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 07/12/12</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/9.jpg">
<h3>alexandra davies</h3>
<span class="email">alexandra.davies@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 05/11/13</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/57.jpg">
<h3>sergio cole</h3>
<span class="email">sergio.cole@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 02/17/15</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/98.jpg">
<h3>edgar dixon</h3>
<span class="email">edgar.dixon@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 06/17/11</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/94.jpg">
<h3>kirk myers</h3>
<span class="email">kirk.myers@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 09/17/15</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/28.jpg">
<h3>ani hesseling</h3>
<span class="email">ani.hesseling@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 08/14/16</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/24.jpg">
<h3>victoire bonnet</h3>
<span class="email">victoire.bonnet@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 05/13/16</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/44.jpg">
<h3>marcos morales</h3>
<span class="email">marcos.morales@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 01/12/12</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/75.jpg">
<h3>nils neumann</h3>
<span class="email">nils.neumann@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 03/11/12</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/86.jpg">
<h3>emily harrison</h3>
<span class="email">emily.harrison@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 07/18/15</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/41.jpg">
<h3>matthew fortin</h3>
<span class="email">matthew.fortin@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 03/18/15</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/32.jpg">
<h3>charlotte steward</h3>
<span class="email">charlotte.steward@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 02/18/11</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/3.jpg">
<h3>marceau rodriguez</h3>
<span class="email">marceau.rodriguez@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 07/13/14</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/91.jpg">
<h3>hudson anderson</h3>
<span class="email">hudson.anderson@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 09/12/15</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/33.jpg">
<h3>warren phillips</h3>
<span class="email">warren.phillips@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 01/11/12</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/41.jpg">
<h3>leo niva</h3>
<span class="email">leo.niva@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 09/14/15</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/3.jpg">
<h3>hani prevoo</h3>
<span class="email">hani.prevoo@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 01/11/15</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/79.jpg">
<h3>veronica rodriguez</h3>
<span class="email">veronica.rodriguez@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 07/17/12</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/41.jpg">
<h3>ginestal das neves</h3>
<span class="email">ginestal.das neves@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 06/19/12</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/63.jpg">
<h3>devon barnes</h3>
<span class="email">devon.barnes@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 09/19/14</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/55.jpg">
<h3>brennan pierce</h3>
<span class="email">brennan.pierce@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 05/15/14</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/35.jpg">
<h3>zachary singh</h3>
<span class="email">zachary.singh@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 05/19/11</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/35.jpg">
<h3>arlo harris</h3>
<span class="email">arlo.harris@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 07/12/15</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/60.jpg">
<h3>hannah ginnish</h3>
<span class="email">hannah.ginnish@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 05/17/14</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/95.jpg">
<h3>goos brunt</h3>
<span class="email">goos.brunt@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 09/15/12</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/91.jpg">
<h3>eduard riedel</h3>
<span class="email">eduard.riedel@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 06/12/15</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/42.jpg">
<h3>geesken jekel</h3>
<span class="email">geesken.jekel@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 02/12/13</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/54.jpg">
<h3>dolores ryan</h3>
<span class="email">dolores.ryan@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 06/17/16</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/49.jpg">
<h3>steven rogers</h3>
<span class="email">steven.rogers@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 01/18/11</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/63.jpg">
<h3>virgulino silva</h3>
<span class="email">virgulino.silva@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 03/18/11</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/11.jpg">
<h3>lucile bertrand</h3>
<span class="email">lucile.bertrand@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 06/13/16</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/10.jpg">
<h3>elsa lahti</h3>
<span class="email">elsa.lahti@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 04/15/12</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/12.jpg">
<h3>soline leclercq</h3>
<span class="email">soline.leclercq@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 05/12/14</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/89.jpg">
<h3>henri kruse</h3>
<span class="email">henri.kruse@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 05/14/13</span>
</div>
</li>
</ul>
</div>
body{
background-color: #e1f1f6;
font-family: Helvetica, sans-serif;
color: #222;
}
.page{
margin: 50px auto;
width: 70%;
background-color: #fff;
border-radius: 5px;
padding: 50px;
}
.page-header{
margin-bottom: 20px;
}
.page-header h2{
float: left;
font-size: 22px;
text-transform: uppercase;
font-weight: bold;
color: #555;
}
.page-header .student-search{
float: right;
}
.page-header .student-search input{
border-radius: 5px;
border: 1px solid #eaeaea;
padding: 8px 15px;
font-size: 14px;
}
.page-header .student-search button{
border-radius: 5px;
border: 1px solid #eaeaea;
padding: 8px 15px;
font-size: 14px;
background-color: #4ba6c3;
color: #fff
}
.student-list{}
.student-item{
margin: 0 0 20px 0;
padding: 0 0 20px 0;
border-bottom: 1px solid #eaeaea;
}
.student-details{
width: 50%;
float: left;
}
.student-details .avatar{
width: 40px;
height: auto;
border-radius: 20px;
float: left;
margin-right: 14px
}
.student-details h3{
margin: 4px 0 2px 0;
font-weight: bold;
color: #4ba6c3;
}
.student-details .email{
color: #888;
font-size: 14px;
}
.joined-details{
width: 50%;
float: left;
text-align: right;
}
.joined-details .date{
margin-top: 15px;
display: block;
font-size: 14px;
color: #999;
}
.student-item:last-child{
margin: 0;
padding: 0;
border-bottom: none;
}
.pagination{
margin: 40px 0 0 0;
text-align: center;
}
.pagination li{
display: inline;
}
.pagination li a{
border: 1px solid #eaeaea;
border-radius: 5px;
padding: 3px 8px;
text-decoration: none;
color: #4ba6c3;
}
.pagination li a.active,
.pagination li a:hover{
background-color: #4ba6c3;
color: #fff;
}
/* https://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.cf:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.navlink {
float: left;
}
//get all the main elements on the page
var page = document.querySelector(".page");
var pageHeader = document.querySelector(".page-header");
var studentList = document.querySelector(".student-list");
var eachStudent = document.querySelectorAll(".student-item");
var studentDetails = document.querySelector(".student-details");
var inputString = document.getElementById('inputSearch');
//Set the pages variable
var currentPage = 1;
var numPages = 0;
var studentsPerPage = 10;
var index;
//Recreate Search Element in Js
var searchBar = function createBar (searchString) {
//Creating the three elements that make up the search bar
var studentSearch = document.createElement("div");
var input = document.createElement("input");
var searchButton = document.createElement("button");
var txtNode = document.createTextNode("Search");
//Define the type of the entry
input.type="text";
//Set the attributes fro the different elements to make it easier to select them
studentSearch.setAttribute("class", "student-search");
input.setAttribute("id", "inputSearch");
searchButton.setAttribute("id", "search-button");
//Append all these elements to the page
searchButton.appendChild(txtNode);
studentSearch.appendChild(input);
studentSearch.appendChild(searchButton);
//Setting the placeholder for the searchButton
input.placeholder = "Type name here..";
//Return the main element which contains all the elements
return studentSearch;
}
//Create static container for pagination in Js
var paginationFilter = function pageFilter (nbOfEntries) {
//Create the static elements for the pagination
var pagination = document.createElement('div');
var ulList = document.createElement('ul');
//Giving them attributes to select them easily
pagination.setAttribute("class", "pagination");
ulList.setAttribute("id", "pagelist");
//Append the ulList to the main pagination div
pagination.appendChild(ulList);
//Return the main div that contains all the elements
return pagination;
};
//Finding the number of students
var numberOfStudents = function () {
var numberOfStudents = eachStudent.length;
//Return the number of students
return (numberOfStudents);
}
//Finding the number of pages
var numberOfPages = function () {
//Divise the number of students by the number of students per pag
var numberOfPages = parseInt(numberOfStudents() / studentsPerPage);
//If there is a remaining to the above division then create an extra page
if ( numberOfStudents() % studentsPerPage > 0 ){
numPages += 1;
}
//Return the number of students
return numberOfPages;
};
//Start by hiding all the students on the list
var hideAll = function () {
for (var i = 0; i < numberOfStudents(); i++) {
eachStudent[i].style.display = "none";
}
};
//Then display only 10 intems per page
function showStudents (number) {
for (var i = 0; i < studentsPerPage; i++) {
index = number * studentsPerPage - studentsPerPage + i;
eachStudent[index].style.display = "block";
}
};
//Create the pagination links dynamically
function createPages () {
for (var i = 0; i <= numberOfPages(); i++) {
//Create the dynamic elements in the pagination
var liList = document.createElement('li');
var pageLink = document.createElement('a');
//Set attributes to the pagination links & the li list
pageLink.setAttribute("href", "#");
pageLink.setAttribute("class", "link");
liList.setAttribute("class", "pageLi");
//Append the different elements to the static ulList
var pagelist = document.getElementById("pagelist");
pagelist.appendChild(liList);
liList.appendChild(pageLink);
//Create and appending the page numbers for the pagination
var pageNumbers = document.createTextNode(i + 1);
pageLink.appendChild(pageNumbers);
pageLink.addEventListener("click", function(){
var pageNumClicked = (this.innerHTML || this.innerText);
changePage(pageNumClicked);
}, false);
}
return i;
};
//Create the seach feature
var searchFunction = function searchFeature(searchString) {
var eachStudentI;
console.log("Is my search feature working?");
//Get the value entered in the search box
var inputString = document.getElementById('inputSearch');
//Onkeyup we want to filter the content by the string entered in the search box dynamically
inputString.onkeyup = function() {
//toUpperCase to make it case insensitive
var filter = inputString.value.toUpperCase();
//loop through all the li's
for (var i = 0; i < eachStudent.length; i++) {
//Select the student name and retrieve the .innerText value
var studentName = document.getElementsByTagName("h3");
var studentInfo = studentName[i].innerText;
//Display all the results where indexOf() does not return -1
if (studentInfo.toUpperCase().indexOf(filter) != -1) {
eachStudent[i].style.display = 'list-item';
//numberOfStudents = eachStudent[i]
console.log(eachStudent);
} else {
eachStudent[i].style.display = 'none';
}
}
}
}
//Global function to add all the elements onLoad of the page
function addElements() {
pageHeader.appendChild(searchBar());
page.appendChild(paginationFilter());
var searchButton = document.getElementById("search-button");
searchButton.addEventListener("click", searchFunction);
//fadeIn();
//noResults();
hideAll()
createPages();
showStudents(1);
searchFunction();
}
window.onload = addElements();
