Untitled
unknown
plain_text
6 months ago
3.4 kB
1
Indexable
Never
<!DOCTYPE html> <html> <head> <title>Cart Table</title> <style> table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } img { width: 50px; height: 50px; } .pagination { margin-top: 20px; } .pagination a { display: inline-block; padding: 8px 16px; text-decoration: none; background-color: #f2f2f2; color: #666; border-radius: 5px; margin-right: 5px; } .pagination a.active { background-color: #007bff; color: #fff; } .search-container { margin-top: 20px; } .search-container input[type=text] { padding: 8px; width: 200px; } .search-container button { padding: 8px 16px; background-color: #007bff; color: #fff; border: none; cursor: pointer; } </style> </head> <body> <div class="search-container"> <input type="text" id="searchInput" placeholder="Search by name"> <button onclick="searchTable()">Search</button> </div> <table id="cartTable"> <thead> <tr> <th>Image</th> <th>Name</th> <th>Phone</th> <th>Email</th> </tr> </thead> <tbody></tbody> </table> <div class="pagination"></div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> var currentPage = 1; var pageSize = 5; var employeeData = []; $(document).ready(function() { $.ajax({ url: 'https://dummyjson.com/users/', dataType: 'json', success: function(data) { employeeData = data; displayTable(); displayPagination(); } }); }); function displayTable() { var startIndex = (currentPage - 1) * pageSize; var endIndex = startIndex + pageSize; var tableBody = $('#cartTable tbody'); tableBody.empty(); var filteredData = employeeData; $.each(filteredData.slice(startIndex, endIndex), function(index, user) { var row = $('<tr></tr>'); row.append('<td><img src="' + user.picture + '"></td>'); row.append('<td>' + user.name + '</td>'); row.append('<td>' + user.phone + '</td>'); row.append('<td>' + user.email + '</td>'); tableBody.append(row); }); } function displayPagination() { var totalPages = Math.ceil(employeeData.length / pageSize); var paginationContainer = $('.pagination'); paginationContainer.empty(); for (var i = 1; i <= totalPages; i++) { var pageLink = $('<a href="#" onclick="changePage(' + i + ')">' + i + '</a>'); if (i === currentPage) { pageLink.addClass('active'); } paginationContainer.append(pageLink); } } function changePage(page) { currentPage = page; displayTable(); displayPagination(); } function searchTable() { var searchTerm = $('#searchInput').val().toLowerCase(); var filteredData = employeeData.filter(function(user) { return user.name.toLowerCase().includes(searchTerm); }); currentPage = 1; employeeData = filteredData; displayTable(); displayPagination(); } </script> </body> </html>