Untitled
unknown
plain_text
a year ago
4.7 kB
2
Indexable
Never
<!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>