Untitled
unknown
plain_text
2 years ago
5.1 kB
4
Indexable
<!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>Username</th> <th>Email</th> <th>Phone</th> <th>Website</th> </tr> </thead> <tbody></tbody> </table> <div class="pagination"></div> <script> $(document).ready(function() { var employeeData = []; // Variable to store the fetched employee data var pageSize = 5; // Number of employees to show per page var currentPage = 1; // Current page number // Make AJAX request to fetch JSON data $.ajax({ url: 'https://jsonplaceholder.typicode.com/users', dataType: 'json', success: function(data) { employeeData = data; // Store the fetched data in the variable // 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.username.toLowerCase().includes(searchTerm) || employee.email.toLowerCase().includes(searchTerm) || employee.phone.toLowerCase().includes(searchTerm) || employee.website.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); }); // Pagination link click event handler $('.pagination').on('click', 'a', function() { var link = $(this); if (!link.hasClass('active')) { var page = link.text(); currentPage = parseInt(page); // Clear the table body and populate with data for the selected page $('#employeeTable tbody').empty(); populateTable(employeeData, currentPage); // Update active link in pagination $('.pagination a').removeClass('active'); link.addClass('active'); } }); // Function to populate the table with employee data for the given page function populateTable(data, page) { var startIndex = (page - 1) * pageSize; var endIndex = startIndex + pageSize; var currentPageData = data.slice(startIndex, endIndex); $.each(currentPageData, function(index, employee) { var row = $('<tr>'); row.append($('<td>').html('<img src="https://via.placeholder.com/50" alt="Employee Photo">')); row.append($('<td>').text(employee.name)); row.append($('<td>').text(employee.username)); row.append($('<td>').text(employee.email)); row.append($('<td>').text(employee.phone)); row.append($('<td>').text(employee.website)); $('#employeeTable tbody').append(row); }); } // Function to calculate and display pagination links function displayPagination(totalDataCount) { $('.pagination').empty(); var totalPages = Math.ceil((totalDataCount || employeeData.length) / pageSize); for (var i = 1; i <= totalPages; i++) { var link = $('<a>'); link.attr('href', '#'); link.text(i); if (i === currentPage) { link.addClass('active'); } $('.pagination').append(link); } } }); </script> </body> </html>
Editor is loading...