Untitled

<!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>
Editor is loading...