Photo by Eugenio Mazzone on Unsplash
Creating a Tabbed Interface with Dynamic Pagination in HTML, CSS, and JavaScript
When designing a user interface that presents multiple sets of data, combining tabbed navigation with dynamic pagination can greatly enhance user experience. In this tutorial, we'll walk you through the steps of creating a tabbed interface with dynamic pagination using HTML, CSS, and JavaScript.
Step 1: Setting Up the HTML Structure
First, let's create the foundation of our tabbed interface by structuring the HTML. We'll use buttons for the tabs and div elements for the tab content. Each tab will display a different set of data.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags and title -->
<!-- Include your CSS stylesheet -->
</head>
<body>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'overview')" id="defaultOpen">Bets</button>
<button class="tablinks" onclick="openCity(event, 'settings')">Deposits</button>
<button class="tablinks" onclick="openCity(event, 'verification')">Withdrawals</button>
<button class="tablinks" onclick="openCity(event, 'security')">Others</button>
</div>
<div id="overview" class="tabcontent">
<!-- Content for "Bets" tab -->
<div class="mbodybody">
<div class="bodyhead">
<div>Action</div>
<div>Date</div>
<div>Amount</div>
</div>
<div class="bodybody">
<div class="ellipsis">
<span> SXUHDJKDF</span>
</div>
<div class="ellipsis">
<span>21/02/2023</span>
</div>
<div class="ellipsis cgreen">
<i class="fa fa-dollar"></i>
<span> 179.20</span>
</div>
</div>
<div class="bodybody">
<div class="ellipsis">
<span> ROPFHSJKSSS</span>
</div>
<div class="ellipsis">
<span>27/04/2023</span>
</div>
<div class="ellipsis cgreen">
<i class="fa fa-dollar"></i>
<span> 150.00</span>
</div>
</div>
<div class="bodybody">
<div class="ellipsis">
<span> RGHKUH4JDJ</span>
</div>
<div class="ellipsis">
<span>10/05/2023</span>
</div>
<div class="ellipsis cgreen">
<i class="fa fa-dollar"></i>
<span> 132.89</span>
</div>
</div>
<div class="bodybody">
<div class="ellipsis">
<span> RGHKUH4JDJ</span>
</div>
<div class="ellipsis">
<span>10/05/2023</span>
</div>
<div class="ellipsis cgreen">
<i class="fa fa-dollar"></i>
<span> 132.89</span>
</div>
</div>
<div class="bodybody">
<div class="ellipsis">
<span> RGHKUH4JDJ</span>
</div>
<div class="ellipsis">
<span>10/05/2023</span>
</div>
<div class="ellipsis cgreen">
<i class="fa fa-dollar"></i>
<span> 132.89</span>
</div>
</div>
<div class="bodybody">
<div class="ellipsis">
<span> RGHKUH4JDJ</span>
</div>
<div class="ellipsis">
<span>10/05/2023</span>
</div>
<div class="ellipsis cgreen">
<i class="fa fa-dollar"></i>
<span> 132.89</span>
</div>
</div>
<div class="navi">
<button class="previous" disabled>Previous</button>
<button class="next" onclick="navigate('next')">Next</button>
</div>
</div>
</div>
<div id="settings" class="tabcontent">
<!-- Content for "Deposits" tab -->
<div class="navi">
<button class="previous" disabled>Previous</button>
<button class="next" onclick="navigate('next')">Next</button>
</div>
</div>
<div id="verification" class="tabcontent">
<!-- Content for "Withdrawals" tab -->
<div class="navi">
<button class="previous" disabled>Previous</button>
<button class="next" onclick="navigate('next')">Next</button>
</div>
</div>
<div id="security" class="tabcontent">
<!-- Content for "Others" tab -->
<div class="mbodybody">
<div class="bodyhead">
<div>Action</div>
<div>Date</div>
<div>Amount</div>
</div>
<div class="bodybody">
<div class="ellipsis">
<span> SXUHDJKDF</span>
</div>
<div class="ellipsis">
<span>21/02/2023</span>
</div>
<div class="ellipsis cgreen">
<i class="fa fa-dollar"></i>
<span> 179.20</span>
</div>
</div>
<div class="bodybody">
<div class="ellipsis">
<span> ROPFHSJKSSS</span>
</div>
<div class="ellipsis">
<span>27/04/2023</span>
</div>
<div class="ellipsis cgreen">
<i class="fa fa-dollar"></i>
<span> 150.00</span>
</div>
</div>
<div class="bodybody">
<div class="ellipsis">
<span> RGHKUH4JDJ</span>
</div>
<div class="ellipsis">
<span>10/05/2023</span>
</div>
<div class="ellipsis cgreen">
<i class="fa fa-dollar"></i>
<span> 132.89</span>
</div>
</div>
<div class="bodybody">
<div class="ellipsis">
<span> RGHKUH4JDJ</span>
</div>
<div class="ellipsis">
<span>10/05/2023</span>
</div>
<div class="ellipsis cgreen">
<i class="fa fa-dollar"></i>
<span> 132.89</span>
</div>
</div>
<div class="bodybody">
<div class="ellipsis">
<span> RGHKUH4JDJ</span>
</div>
<div class="ellipsis">
<span>10/05/2023</span>
</div>
<div class="ellipsis cgreen">
<i class="fa fa-dollar"></i>
<span> 132.89</span>
</div>
</div>
<div class="bodybody">
<div class="ellipsis">
<span> RGHKUH4JDJ</span>
</div>
<div class="ellipsis">
<span>10/05/2023</span>
</div>
<div class="ellipsis cgreen">
<i class="fa fa-dollar"></i>
<span> 132.89</span>
</div>
</div>
<div class="navi">
<button class="previous" disabled>Previous</button>
<button class="next" onclick="navigate('next')">Next</button>
</div>
</div>
</div>
<!-- Include your JavaScript code -->
</body>
</html>
Step 2: Styling the Interface
Next, apply your desired CSS styles to create a visually appealing tabbed interface. You can style the tabs and tab content to match your application's design.
/* Your CSS styles for tabs and tab content here */
.mbodybody {
display: flex;
flex-direction: column;
gap: 2px;
padding: 5px 5px;
}
.bodybody {
height: 35px;
background-color: rgba(27, 27, 40, 0.961);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0px;
font-size: 14px;
margin-bottom: 5px;
color: white;
}
.bodybody div {
display: flex;
align-items: center;
border: 0px solid red;
width: 33%;
padding: 5px 15px;
white-space: normal; /* Allow text to wrap */
white-space:nowrap;
overflow: hidden;
}
.bodybody div i{
margin-right: 5px;
}
.navi{
margin-top: 20px;
display: flex;
justify-content: right;
gap: 10px;
}
.navi button{
padding: 10px;
color: white;
background-color: rgb(28, 68, 68);
border-radius: 5px;
border: none;
width: 80px;
}
Step 3: Implementing Dynamic Pagination
To add dynamic pagination to each tab's content, we'll use JavaScript. This will allow users to navigate through the data in chunks, enhancing readability.
<script>
function setupPagination(tabId) {
const tabContent = document.getElementById(tabId);
const items = tabContent.querySelectorAll('.bodybody');
const itemsPerPage = 5;
let currentPage = 0;
const totalPages = Math.ceil(items.length / itemsPerPage);
const previousButton = tabContent.querySelector('.previous');
const nextButton = tabContent.querySelector('.next');
if (items.length <= itemsPerPage) {
previousButton.style.display = 'none'; // Hide Previous button
nextButton.style.display = 'none'; // Hide Next button
}
function showPage(page) {
const startIndex = page * itemsPerPage;
const endIndex = Math.min(startIndex + itemsPerPage, items.length);
items.forEach((item, index) => {
if (index >= startIndex && index < endIndex) {
item.style.display = 'flex';
item.style.justifyContent = 'space-between';
} else {
item.style.display = 'none';
}
});
previousButton.disabled = page === 0;
nextButton.disabled = page === totalPages - 1;
}
nextButton.addEventListener('click', () => {
if (currentPage < totalPages - 1) {
currentPage++;
showPage(currentPage);
}
});
previousButton.addEventListener('click', () => {
if (currentPage > 0) {
currentPage--;
showPage(currentPage);
}
});
showPage(currentPage);
}
// Loop through each tab content and set up pagination
const tabContents = document.querySelectorAll('.tabcontent');
tabContents.forEach(tabContent => {
const tabId = tabContent.id;
setupPagination(tabId);
});
</script>
Conclusion
In this tutorial, we've demonstrated how to create a tabbed interface with dynamic pagination using HTML, CSS, and JavaScript. By organizing your content into tabs and implementing dynamic pagination, you can present large amounts of data in a more user-friendly manner, enhancing the overall user experience of your web application.
Feel free to customize the styles and functionality to match your specific needs and design preferences. With this knowledge, you're well-equipped to create intuitive and interactive tabbed interfaces that enhance the usability of your web applications.