Here is my HTML Code for it
<body>
<div class="container-fluid">
<!-- Alphabet Filter -->
<div id="letter-container" class="d-flex flex-wrap justify-content-center"></div>
<!-- Search Bar and Filters -->
<form class="d-flex flex-wrap justify-content-center align-items-center">
<div class="input-group me-3 mx-5" style="flex: 1 1 400px">
<span class="input-group-text"><i class="fa fa-search"></i></span>
<input class="form-control" type="text" id="globalSearchInput" placeholder="Search"
style="width: 150px" />
<button class="btn btn-primary" id="searchButton" type="button">
<i class="fa fa-arrow-right"></i>
</button>
</div>
<div class="me-3 d-flex align-items-center" style="flex: 1">
<label class="me-2" for="sortSelect">Sort:</label>
<select class="form-select" id="sortSelect">
<option class="DropdownData" value="firstName" selected>
First Name
</option>
<option class="DropdownData" value="lastName">Last Name</option>
<option class="DropdownData" value="department">Department</option>
</select>
</div>
<div class="d-flex align-items-center flex-wrap" style="flex: 1">
<label class="me-2" title="Filter By Department">Filter By Department:</label>
<div class="dropdown">
<button class="btn btn-link dropdown-toggle" type="button" id="departmentFilterDropdown"
data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa fa-filter"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="departmentFilterDropdown" id="filterOptions">
<li><a class="dropdown-item" href="#" data-department="All">All Departments</a></li>
<li><a class="dropdown-item" href="#" data-department="IT">IT</a></li>
<li><a class="dropdown-item" href="#" data-department="HR">HR</a></li>
<li><a class="dropdown-item" href="#" data-department="Business Development">Business
Development</a></li>
<li><a class="dropdown-item" href="#" data-department="QA">QA</a></li>
<li><a class="dropdown-item" href="#" data-department="Knacktek">Knacktek</a></li>
</ul>
</div>
</div>
</form>
</div>
<!-- Profile card -->
<div class="container mt-3">
<div class="row" id="profileContainer">
<div class="card text-center mx-auto" style="width: 100%; border: 1px solid black" id="profileCard1">
<div class="card-body p-0">
<h5 class="card-title text-white py-2"
style="background-color: rgb(52, 179, 221); margin-bottom: 0">
<span id="name1">Demo Data</span>
</h5>
<p class="card-subtitle mb-2" id="designation1">Demo Data</p>
<img src="./assets/avatar.png" class="rounded-circle mb-2 img-fluid" id="profilePhoto1"
alt="Profile Photo" style="width: 100px; height: 100px" />
<p class="card-text mb-2"><strong>Company:</strong> <span id="company1">Binary
Republik</span>
</p>
<p class="card-text mb-2"><strong>Department:</strong> <span id="department1">Demo Data</span>
</p>
<p class="card-text mb-2"><strong>Email:</strong> <span id="email1">Demo Data</span></p>
<p class="card-text mb-4"><strong>Manager/Reports To:</strong> <span id="reporter1">Demo
Data</span></p>
<div class="d-flex justify-content-between">
<p class="card-text"><strong>Extension:</strong> <span id="extension1">Demo Data</span></p>
<p class="card-text"><strong>Location:</strong> <span id="location1">Demo Data</span></p>
</div>
</div>
</div>
</div>
</div>
<!-- Paginations -->
<div id="pagination-container" class="container mt-2">
<div class="d-flex justify-content-between align-items-center mb-2">
<div class="d-flex align-items-center">
<label for="itemsPerPage" class="me-2">Items per page:</label>
<select id="itemsPerPage" class="form-select d-inline-block w-auto">
<option value="8">8</option>
<option value="16">16</option>
<option value="20">20</option>
<option value="24">24</option>
<option value="all">All</option>
</select>
</div>
<ul class="pagination mb-0" id="pagination"></ul>
</div>
</div>
</body>
Here is my JS Code for it
$(document).ready(function () {
const letters = "All,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z".split(",");
letters.forEach((letter) => {
$("#letter-container").append(`<div class="letters">${letter}</div>`);
});
var jsonData = [];
let filteredEmployees = [];
let sortedEmployees = [];
// var currentPage = 1;
// var itemsPerPage = $("#itemsPerPage").val() || 8;
// var pageCount = Math.ceil(filteredEmployees.length / itemsPerPage);
$.ajax({
url: "./assets/employeeDirectory.json",
method: "GET",
dataType: "json",
success: function (data) {
jsonData = data;
displayEmployeeCards(data);
},
error: function () {
alert("Failed to fetch data.");
},
});
// Filter By Alphabets
filterByAlphabet();
// Sort By Dropdown
sortByDropdown();
//Filter By departments
filterByDepartment();
//Global Search
applyGlobalSearch();
function displayEmployeeCards(jsonData) {
const container = $("#profileContainer");
container.empty();
jsonData.forEach((employee) => {
const businessPhones = employee.businessPhones.join(", ") || "NA";
var cardHtml = `
<div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
<div class="card text-center mx-auto" style="border: 1px solid black; height: 440px">
<div class="card-body p-0">
<h5 class="card-title text-white py-2" style="background-color: rgb(52, 179, 221); margin-bottom: 0">
<span>${employee.displayName || "NA"}</span>
</h5>
<div style="padding: 5px">
<p class="card-subtitle mb-2">${employee.jobTitle || "NA"}</p>
<img src="./assets/avatar.png" class="rounded-circle mb-3 img-fluid" alt="Profile Photo"
style="width: 100px; height: 100px" />
<p class="card-text mb-2">Binary Republik</p>
<p class="card-text mb-2">${employee.department || "NA"}</p>
<p class="card-text mb-2">
<strong>Email:</strong> <span>${employee.mail}</span>
</p>
<p class="card-text mb-4">
<strong>Manager/Reports To:</strong>
<span>NA</span>
</p>
<div class="d-flex justify-content-between">
<p class="card-text mb-0">
<strong>Extension:</strong> <span>${businessPhones}</span>
</p>
<p class="card-text mb-0">
<strong>Location:</strong>
<span>${employee.officeLocation || "NA"}</span>
</p>
</div>
</div>
</div>
</div>
</div>`;
container.append(cardHtml);
});
}
function filterByDepartment() {
$("#filterOptions .dropdown-item").on("click", function () {
const selectedDepartment = $(this).data("department");
if (selectedDepartment === "All") {
departmentFilteredEmployees = sortedEmployees;
}
else {
departmentFilteredEmployees = sortedEmployees.filter(function (employee) {
return employee.department === selectedDepartment;
});
}
if (departmentFilteredEmployees.length == 0) {
$("#profileContainer").html(`<div class="col-12 text-center"> <p class="mt-4">No Data Found</p> </div>`);
}
else {
displayEmployeeCards(departmentFilteredEmployees);
}
});
}
function sortByDropdown() {
$("#sortSelect").on("change", function () {
const selectedFilterDropdown = $(this).val();
sortedEmployees = filteredEmployees.slice();;
if (selectedFilterDropdown === "firstName") {
sortedEmployees.sort();
}
else if (selectedFilterDropdown === "lastName") {
sortedEmployees.sort(function (a, b) {
const surnameA = a.surname || "";
const surnameB = b.surname || "";
return surnameA.localeCompare(surnameB);
});
} else if (selectedFilterDropdown === "department") {
sortedEmployees.sort(function (a, b) {
const departmentA = a.department || "";
const departmentB = b.department || "";
return departmentA.localeCompare(departmentB);
});
}
if (sortedEmployees.length == 0) {
$("#profileContainer").html(`<div class="col-12 text-center"> <p class="mt-4">No Data Found</p> </div>`);
}
else {
displayEmployeeCards(sortedEmployees);
}
});
}
function filterByAlphabet() {
$(".letters").on("click", function () {
const selectedLetter = this.innerText;
if (selectedLetter === "All") {
filteredEmployees = jsonData;
}
else {
filteredEmployees = jsonData.filter(function (employee) {
return employee.displayName.startsWith(selectedLetter);
});
}
if (filteredEmployees.length == 0) {
$("#profileContainer").html(`<div class="col-12 text-center"> <p class="mt-4">No Data Found</p> </div>`);
}
else {
displayEmployeeCards(filteredEmployees);
}
});
}
function applyGlobalSearch() {
$("#searchButton").on("click", function () {
const searchTerm = $("#globalSearchInput").val().toLowerCase();
const filteredEmployees = jsonData.filter(function (employee) {
return (
(employee.givenName && employee.givenName.toLowerCase().includes(searchTerm)) ||
(employee.surname && employee.surname.toLowerCase().includes(searchTerm)) ||
(employee.displayName && employee.displayName.toLowerCase().includes(searchTerm)) ||
(employee.department && employee.department.toLowerCase().includes(searchTerm)) ||
(employee.jobTitle && employee.jobTitle.toLowerCase().includes(searchTerm)) ||
(employee.mail && employee.mail.toLowerCase().includes(searchTerm)) ||
(employee.businessPhones && employee.businessPhones.filter(phone => phone.toLowerCase().includes(searchTerm)).length > 0) ||
(employee.officeLocation && employee.officeLocation.toLowerCase().includes(searchTerm))
);
});
if (filteredEmployees.length === 0) {
$("#profileContainer").html(`<div class="col-12 text-center"><p class="mt-4">No Data Found</p></div>`);
} else {
displayEmployeeCards(filteredEmployees);
}
});
}
});
I tried to implement using the twbsPagination method, which was shown in javatpoint website, but it doesn’t work on my code, maybe some error from my side. also i tried the ChatGPT method but it filters and sorts the entire data other than the already sorted data (if any)