Building a User Logs Table with Navigation and Search Using Bootstrap 5
In web applications, user activity logs are crucial for monitoring and analyzing user behavior, troubleshooting issues, and ensuring security. A well-designed user logs table enhances the user experience by making it easy to search, filter, and navigate through logs. In this article, we will walk through building a user logs table with navigation and search functionality using Bootstrap 5. Prerequisites Before we start, ensure you have the following: Basic understanding of HTML, CSS, and JavaScript. Bootstrap 5 library (can be included via CDN). Setting Up the HTML Structure First, let's create the basic HTML structure for our user logs table. We'll use Bootstrap 5's grid system and table classes to make the table responsive and visually appealing. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>User Logs Table</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> </head> <body> <div class="container mt-5"> <h1 class="mb-4">User Logs</h1> <div class="row mb-3"> <div class="col-md-6"> <input type="text" id="searchInput" class="form-control" placeholder="Search logs..."> </div> </div> <table class="table table-striped"> <thead> <tr> <th scope="col">#</th> <th scope="col">User ID</th> <th scope="col">Action</th> <th scope="col">Timestamp</th> </tr> </thead> <tbody id="logsTableBody"> <!-- Log entries will be inserted here dynamically --> </tbody> </table> <nav> <ul class="pagination justify-content-center" id="pagination"> <!-- Pagination buttons will be inserted here dynamically --> </ul> </nav> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> <script src="script.js"></script> </body> </html> JavaScript for Search and Pagination Next, we'll write JavaScript to handle search and pagination. For simplicity, we'll use jQuery to manipulate the DOM. Sample Data We'll use some sample data to populate the table. // script.js const logs = [ { id: 1, userId: 'user123', action: 'Login', timestamp: '2024-06-14 10:00:00' }, { id: 2, userId: 'user456', action: 'Logout', timestamp: '2024-06-14 10:05:00' }, // Add more sample logs here ]; const logsPerPage = 10; let currentPage = 1; let filteredLogs = logs; $(document).ready(function () { renderTable(); renderPagination(); $('#searchInput').on('input', handleSearch); }); function handleSearch() { const searchQuery = $('#searchInput').val().toLowerCase(); filteredLogs = logs.filter(log => log.userId.toLowerCase().includes(searchQuery) || log.action.toLowerCase().includes(searchQuery) || log.timestamp.toLowerCase().includes(searchQuery) ); currentPage = 1; renderTable(); renderPagination(); } function renderTable() { const startIndex = (currentPage - 1) * logsPerPage; const endIndex = startIndex + logsPerPage; const logsToDisplay = filteredLogs.slice(startIndex, endIndex); $('#logsTableBody').empty(); logsToDisplay.forEach(log => { $('#logsTableBody').append(` <tr> <th scope="row">${log.id}</th> <td>${log.userId}</td> <td>${log.action}</td> <td>${log.timestamp}</td> </tr> `); }); } function renderPagination() { const totalPages = Math.ceil(filteredLogs.length / logsPerPage); $('#pagination').empty(); for (let i = 1; i <= totalPages; i++) { $('#pagination').append(` <li class="page-item ${i === currentPage ? 'active' : ''}"> <a class="page-link" href="#" data-page="${i}">${i}</a> </li> `); } $('.page-link').on('click', function (e) { e.preventDefault(); currentPage = $(this).data('page'); renderTable(); renderPagination(); }); } Explanation HTML Structure: The table is defined using Bootstrap's table classes. An input field for search functionality is placed above the table. A pagination component is placed below the table. JavaScript (script.js): We initialize an array of logs for demonstration purposes. The handleSearch function filters the logs based on the search query and updates the table and pagination. The renderTable function displays the logs for the current page. The renderPagination function creates pagination buttons and handles page switching.
