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.
Stay Safe Online—Get 3 Months of NordVPN Free!
Secure your internet connection instantly with NordVPN and enjoy 3 extra months free on any plan. Whether you’re browsing, streaming, or gaming, NordVPN keeps your data safe from prying eyes. Don’t wait—protect your privacy and save big today!
© vladoivankovic.com
