<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Table with Search</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> body { background-color: #f8f9fa; padding: 20px 0; } .table-card { background: white; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); overflow: hidden; } .search-box { position: relative; } .search-box i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #6c757d; } .search-box input { padding-left: 45px; } .badge-status { padding: 6px 12px; font-size: 0.75rem; } .no-results { display: none; text-align: center; padding: 40px; color: #6c757d; } .table-actions button { padding: 4px 8px; font-size: 0.875rem; } tbody tr { transition: background-color 0.2s; } tbody tr:hover { background-color: #f8f9fa; } .table-stats { font-size: 0.875rem; color: #6c757d; } </style> </head> <body> <div class="container"> <div class="table-card"> <!-- Header --> <div class="p-4 border-bottom"> <div class="row align-items-center mb-3"> <div class="col-md-6"> <h3 class="mb-0"><i class="fas fa-users me-2 text-primary"></i>Employee Management</h3> </div> <div class="col-md-6 text-md-end mt-3 mt-md-0"> <button class="btn btn-primary"> <i class="fas fa-plus me-2"></i>Add Employee </button> </div> </div> <!-- Search and Filter --> <div class="row g-3"> <div class="col-md-6"> <div class="search-box"> <i class="fas fa-search"></i> <input type="text" id="searchInput" class="form-control" placeholder="Search by name, email, department, or position..."> </div> </div> <div class="col-md-3"> <select id="statusFilter" class="form-select"> <option value="">All Status</option> <option value="Active">Active</option> <option value="Inactive">Inactive</option> <option value="On Leave">On Leave</option> </select> </div> <div class="col-md-3"> <select id="departmentFilter" class="form-select"> <option value="">All Departments</option> <option value="Engineering">Engineering</option> <option value="Marketing">Marketing</option> <option value="Sales">Sales</option> <option value="HR">HR</option> <option value="Finance">Finance</option> </select> </div> </div> <!-- Table Stats --> <div class="table-stats mt-3"> Showing <span id="visibleRows">0</span> of <span id="totalRows">0</span> employees </div> </div> <!-- Table --> <div class="table-responsive"> <table class="table table-hover mb-0" id="employeeTable"> <thead class="table-light"> <tr> <th> <input type="checkbox" class="form-check-input" id="selectAll"> </th> <th>ID</th> <th>Name</th> <th>Email</th> <th>Department</th> <th>Position</th> <th>Status</th> <th>Actions</th> </tr> </thead> <tbody id="tableBody"> <tr data-status="Active" data-department="Engineering"> <td><input type="checkbox" class="form-check-input row-checkbox"></td> <td>#001</td> <td><strong>John Doe</strong></td> <td>john.doe@company.com</td> <td>Engineering</td> <td>Senior Developer</td> <td><span class="badge bg-success badge-status">Active</span></td> <td class="table-actions"> <button class="btn btn-sm btn-outline-primary" title="Edit"> <i class="fas fa-edit"></i> </button> <button class="btn btn-sm btn-outline-danger" title="Delete"> <i class="fas fa-trash"></i> </button> </td> </tr> <tr data-status="Active" data-department="Marketing"> <td><input type="checkbox" class="form-check-input row-checkbox"></td> <td>#002</td> <td><strong>Jane Smith</strong></td> <td>jane.smith@company.com</td> <td>Marketing</td> <td>Marketing Manager</td> <td><span class="badge bg-success badge-status">Active</span></td> <td class="table-actions"> <button class="btn btn-sm btn-outline-primary" title="Edit"> <i class="fas fa-edit"></i> </button> <button class="btn btn-sm btn-outline-danger" title="Delete"> <i class="fas fa-trash"></i> </button> </td> </tr> <tr data-status="On Leave" data-department="Sales"> <td><input type="checkbox" class="form-check-input row-checkbox"></td> <td>#003</td> <td><strong>Mike Johnson</strong></td> <td>mike.johnson@company.com</td> <td>Sales</td> <td>Sales Representative</td> <td><span class="badge bg-warning text-dark badge-status">On Leave</span></td> <td class="table-actions"> <button class="btn btn-sm btn-outline-primary" title="Edit"> <i class="fas fa-edit"></i> </button> <button class="btn btn-sm btn-outline-danger" title="Delete"> <i class="fas fa-trash"></i> </button> </td> </tr> <tr data-status="Active" data-department="HR"> <td><input type="checkbox" class="form-check-input row-checkbox"></td> <td>#004</td> <td><strong>Sarah Williams</strong></td> <td>sarah.williams@company.com</td> <td>HR</td> <td>HR Specialist</td> <td><span class="badge bg-success badge-status">Active</span></td> <td class="table-actions"> <button class="btn btn-sm btn-outline-primary" title="Edit"> <i class="fas fa-edit"></i> </button> <button class="btn btn-sm btn-outline-danger" title="Delete"> <i class="fas fa-trash"></i> </button> </td> </tr> <tr data-status="Inactive" data-department="Finance"> <td><input type="checkbox" class="form-check-input row-checkbox"></td> <td>#005</td> <td><strong>David Brown</strong></td> <td>david.brown@company.com</td> <td>Finance</td> <td>Accountant</td> <td><span class="badge bg-secondary badge-status">Inactive</span></td> <td class="table-actions"> <button class="btn btn-sm btn-outline-primary" title="Edit"> <i class="fas fa-edit"></i> </button> <button class="btn btn-sm btn-outline-danger" title="Delete"> <i class="fas fa-trash"></i> </button> </td> </tr> <tr data-status="Active" data-department="Engineering"> <td><input type="checkbox" class="form-check-input row-checkbox"></td> <td>#006</td> <td><strong>Emily Davis</strong></td> <td>emily.davis@company.com</td> <td>Engineering</td> <td>UI/UX Designer</td> <td><span class="badge bg-success badge-status">Active</span></td> <td class="table-actions"> <button class="btn btn-sm btn-outline-primary" title="Edit"> <i class="fas fa-edit"></i> </button> <button class="btn btn-sm btn-outline-danger" title="Delete"> <i class="fas fa-trash"></i> </button> </td> </tr> <tr data-status="Active" data-department="Marketing"> <td><input type="checkbox" class="form-check-input row-checkbox"></td> <td>#007</td> <td><strong>Robert Wilson</strong></td> <td>robert.wilson@company.com</td> <td>Marketing</td> <td>Content Writer</td> <td><span class="badge bg-success badge-status">Active</span></td> <td class="table-actions"> <button class="btn btn-sm btn-outline-primary" title="Edit"> <i class="fas fa-edit"></i> </button> <button class="btn btn-sm btn-outline-danger" title="Delete"> <i class="fas fa-trash"></i> </button> </td> </tr> <tr data-status="Active" data-department="Sales"> <td><input type="checkbox" class="form-check-input row-checkbox"></td> <td>#008</td> <td><strong>Lisa Anderson</strong></td> <td>lisa.anderson@company.com</td> <td>Sales</td> <td>Sales Manager</td> <td><span class="badge bg-success badge-status">Active</span></td> <td class="table-actions"> <button class="btn btn-sm btn-outline-primary" title="Edit"> <i class="fas fa-edit"></i> </button> <button class="btn btn-sm btn-outline-danger" title="Delete"> <i class="fas fa-trash"></i> </button> </td> </tr> </tbody> </table> <!-- No Results Message --> <div class="no-results" id="noResults"> <i class="fas fa-search fa-3x mb-3"></i> <h5>No results found</h5> <p>Try adjusting your search or filter criteria</p> </div> </div> <!-- Footer --> <div class="p-3 border-top bg-light"> <div class="row align-items-center"> <div class="col-md-6"> <button class="btn btn-sm btn-outline-danger" id="deleteSelected" disabled> <i class="fas fa-trash me-1"></i>Delete Selected </button> </div> <div class="col-md-6"> <nav aria-label="Table pagination"> <ul class="pagination pagination-sm mb-0 justify-content-md-end justify-content-center mt-3 mt-md-0"> <li class="page-item disabled"> <a class="page-link" href="#">Previous</a> </li> <li class="page-item active"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav> </div> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script> const searchInput = document.getElementById('searchInput'); const statusFilter = document.getElementById('statusFilter'); const departmentFilter = document.getElementById('departmentFilter'); const tableBody = document.getElementById('tableBody'); const noResults = document.getElementById('noResults'); const visibleRowsSpan = document.getElementById('visibleRows'); const totalRowsSpan = document.getElementById('totalRows'); const selectAll = document.getElementById('selectAll'); const deleteSelectedBtn = document.getElementById('deleteSelected'); // Initialize row counts updateRowCounts(); // Search and filter function function filterTable() { const searchTerm = searchInput.value.toLowerCase(); const statusValue = statusFilter.value; const departmentValue = departmentFilter.value; const rows = tableBody.getElementsByTagName('tr'); let visibleCount = 0; for (let row of rows) { const text = row.textContent.toLowerCase(); const status = row.getAttribute('data-status'); const department = row.getAttribute('data-department'); const matchesSearch = text.includes(searchTerm); const matchesStatus = !statusValue || status === statusValue; const matchesDepartment = !departmentValue || department === departmentValue; if (matchesSearch && matchesStatus && matchesDepartment) { row.style.display = ''; visibleCount++; } else { row.style.display = 'none'; } } // Show/hide no results message if (visibleCount === 0) { noResults.style.display = 'block'; } else { noResults.style.display = 'none'; } visibleRowsSpan.textContent = visibleCount; } // Update row counts function updateRowCounts() { const totalRows = tableBody.getElementsByTagName('tr').length; totalRowsSpan.textContent = totalRows; visibleRowsSpan.textContent = totalRows; } // Event listeners for search and filters searchInput.addEventListener('keyup', filterTable); statusFilter.addEventListener('change', filterTable); departmentFilter.addEventListener('change', filterTable); // Select all checkbox selectAll.addEventListener('change', function() { const checkboxes = document.querySelectorAll('.row-checkbox'); checkboxes.forEach(cb => { if (cb.closest('tr').style.display !== 'none') { cb.checked = this.checked; } }); updateDeleteButton(); }); // Individual checkbox handling document.addEventListener('change', function(e) { if (e.target.classList.contains('row-checkbox')) { updateDeleteButton(); } }); // Update delete button state function updateDeleteButton() { const checkedBoxes = document.querySelectorAll('.row-checkbox:checked'); deleteSelectedBtn.disabled = checkedBoxes.length === 0; } // Delete selected rows deleteSelectedBtn.addEventListener('click', function() { if (confirm('Are you sure you want to delete the selected employees?')) { const checkedBoxes = document.querySelectorAll('.row-checkbox:checked'); checkedBoxes.forEach(cb => { cb.closest('tr').remove(); }); selectAll.checked = false; updateDeleteButton(); updateRowCounts(); filterTable(); } }); </script> </body> </html>
Login to leave a comment
No comments yet. Be the first!
View Project
No comments yet. Be the first!