Untitled

unknown
plain_text
a year ago
4.7 kB
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>