<!DOCTYPE html>
<html>
<head>
<title>Employee Cart</title>
<style>
body {
font-family: Arial, sans-serif;
}
#employeeTable {
border-collapse: collapse;
width: 100%;
}
#employeeTable th, #employeeTable td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
#employeeTable th {
background-color: #f2f2f2;
}
#employeeTable img {
height: 50px;
width: auto;
}
#searchContainer {
margin-bottom: 20px;
}
#searchInput, #searchButton {
padding: 8px;
font-size: 14px;
}
#searchButton {
margin-left: 10px;
}
.pagination {
margin-top: 20px;
}
.pagination a {
color: #000;
padding: 8px 16px;
text-decoration: none;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
}
.pagination a:hover:not(.active) {
background-color: #ddd;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="searchContainer">
<input type="text" id="searchInput" placeholder="Enter search term">
<button id="searchButton">Search</button>
</div>
<table id="employeeTable">
<thead>
<tr>
<th>Photo</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div class="pagination"></div>
<script>
$(document).ready(function() {
var employeeData = []; // Variable to store the generated employee data
var pageSize = 5; // Number of employees to show per page
var currentPage = 1; // Current page number
// Generate dummy employee data with random profile pictures
function generateEmployeeData() {
var employeeData = [];
for (var i = 1; i <= 100; i++) {
var employee = {
name: 'Employee ' + i,
email: 'employee' + i + '@example.com',
phone: '123-456-789' + i,
photo: 'https://picsum.photos/50?random=' + i
};
employeeData.push(employee);
}
return employeeData;
}
employeeData = generateEmployeeData();
// Populate the table with employee data for the initial page
populateTable(employeeData, currentPage);
// Calculate and display pagination links
displayPagination();
// Search button click event handler
$('#searchButton').click(function() {
var searchTerm = $('#searchInput').val().trim().toLowerCase();
var filteredData = employeeData.filter(function(employee) {
return (
employee.name.toLowerCase().includes(searchTerm) ||
employee.email.toLowerCase().includes(searchTerm) ||
employee.phone.toLowerCase().includes(searchTerm)
);
});
// Clear the table body and display filtered data for the first page
$('#employeeTable tbody').empty();
currentPage = 1;
populateTable(filteredData, currentPage);
// Update pagination links for filtered data
displayPagination(filteredData.length);
});
// Populate the table with employee data for the specified page
function populateTable(data, page) {
var startIndex = (page - 1) * pageSize;
var endIndex = startIndex + pageSize;
var employees = data.slice(startIndex, endIndex);
var tableBody = $('#employeeTable tbody');
tableBody.empty();
$.each(employees, function(index, employee) {
var row = $('<tr></tr>');
row.append('<td><img src="' + employee.photo + '"></td>');
row.append('<td>' + employee.name + '</td>');
row.append('<td>' + employee.email + '</td>');
row.append('<td>' + employee.phone + '</td>');
tableBody.append(row);
});
}
// Calculate and display pagination links
function displayPagination(totalItems) {
var totalPages = Math.ceil((totalItems || employeeData.length) / pageSize);
var paginationContainer = $('.pagination');
paginationContainer.empty();
for (var i = 1; i <= totalPages; i++) {
var pageLink = $('<a href="#">' + i + '</a>');
if (i === currentPage) {
pageLink.addClass('active');
}
pageLink.click((function(page) {
return function() {
currentPage = page;
populateTable(employeeData, currentPage);
displayPagination();
};
})(i));
paginationContainer.append(pageLink);
}
}
});
</script>
</body>
</html>