Advanced Table using HTML, CSS, and JavaScript with Sorting,...

0 Comments

HTML

Advanced Table using HTML, CSS, and JavaScript with Sorting, Filtering, Pagination, Search, and Extra UI Components

2025-02-27 10:16:00 • Views

Here's a complete step-by-step guide to creating an Advanced Table using HTML, CSS, and JavaScript with Sorting, Filtering, Pagination, Search, and Extra UI Components.

Step 1: Create the HTML Structure

This HTML file defines the table and includes UI components for search, pagination, and filtering.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced Table</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="table-container">
        <h2>Advanced Table</h2>
        
        <input type="text" id="searchInput" placeholder="Search..." onkeyup="searchTable()">
        
        <label for="filter">Filter by Role:</label>
        <select id="filter" onchange="filterTable()">
            <option value="">All</option>
            <option value="Admin">Admin</option>
            <option value="User">User</option>
        </select>

        <table id="dataTable">
            <thead>
                <tr>
                    <th onclick="sortTable(0)">ID</th>
                    <th onclick="sortTable(1)">Name</th>
                    <th onclick="sortTable(2)">Email</th>
                    <th onclick="sortTable(3)">Role</th>
                </tr>
            </thead>
            <tbody>
                <tr><td>1</td><td>Alice</td><td>alice@example.com</td><td>Admin</td></tr>
                <tr><td>2</td><td>Bob</td><td>bob@example.com</td><td>User</td></tr>
                <tr><td>3</td><td>Charlie</td><td>charlie@example.com</td><td>Admin</td></tr>
                <tr><td>4</td><td>David</td><td>david@example.com</td><td>User</td></tr>
                <tr><td>5</td><td>Emma</td><td>emma@example.com</td><td>Admin</td></tr>
            </tbody>
        </table>

        <div class="pagination">
            <button onclick="prevPage()">Prev</button>
            <span id="pageInfo">Page 1</span>
            <button onclick="nextPage()">Next</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

Step 2: Style the Table with CSS

This styles.css file makes the table visually appealing.

body {
    font-family: Arial, sans-serif;
    margin: 20px;
    text-align: center;
}

.table-container {
    width: 80%;
    margin: auto;
}

input, select {
    padding: 8px;
    margin-bottom: 10px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

th, td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
}

th {
    background-color: #007bff;
    color: white;
    cursor: pointer;
}

th:hover {
    background-color: #0056b3;
}

.pagination {
    margin-top: 10px;
}

.pagination button {
    padding: 8px;
    margin: 5px;
}

Step 3: Implement Sorting, Filtering, Search, and Pagination with JavaScript

This script.js file adds interactivity.

// Sorting Function
function sortTable(columnIndex) {
    let table = document.getElementById("dataTable");
    let rows = Array.from(table.rows).slice(1);
    let ascending = table.dataset.sortOrder !== "asc";

    rows.sort((rowA, rowB) => {
        let cellA = rowA.cells[columnIndex].textContent.trim();
        let cellB = rowB.cells[columnIndex].textContent.trim();

        return isNaN(cellA) || isNaN(cellB)
            ? cellA.localeCompare(cellB)
            : cellA - cellB;
    });

    if (!ascending) rows.reverse();
    
    table.tBodies[0].append(...rows);
    table.dataset.sortOrder = ascending ? "asc" : "desc";
}

// Search Function
function searchTable() {
    let input = document.getElementById("searchInput").value.toLowerCase();
    let rows = document.querySelectorAll("#dataTable tbody tr");

    rows.forEach(row => {
        let text = row.textContent.toLowerCase();
        row.style.display = text.includes(input) ? "" : "none";
    });
}

// Filter Function
function filterTable() {
    let filterValue = document.getElementById("filter").value;
    let rows = document.querySelectorAll("#dataTable tbody tr");

    rows.forEach(row => {
        let role = row.cells[3].textContent.trim();
        row.style.display = filterValue === "" || role === filterValue ? "" : "none";
    });
}

// Pagination
let currentPage = 1;
let rowsPerPage = 2;

function showPage(page) {
    let rows = document.querySelectorAll("#dataTable tbody tr");
    let totalPages = Math.ceil(rows.length / rowsPerPage);
    
    if (page < 1) page = 1;
    if (page > totalPages) page = totalPages;

    rows.forEach((row, index) => {
        row.style.display = (index >= (page - 1) * rowsPerPage && index < page * rowsPerPage) ? "" : "none";
    });

    document.getElementById("pageInfo").textContent = `Page ${page} of ${totalPages}`;
    currentPage = page;
}

function nextPage() {
    showPage(currentPage + 1);
}

function prevPage() {
    showPage(currentPage - 1);
}

// Initialize Pagination on Page Load
showPage(1);

How It Works

Sorting: Clicking on a column header sorts the table in ascending/descending order.
Search: Typing in the search box filters the table in real time.
Filtering: Selecting a role from the dropdown filters users based on role.
Pagination: The table displays only 2 rows per page, with "Next" and "Prev" buttons.

Next Steps

Add Edit/Delete buttons for each row.
Allow export to CSV functionality.
Fetch data dynamically from an API.

Would you like additional enhancements or explanations?

Please log in to like, share and comment!

Advanced Table using HTML, CSS, and JavaScript with Sorting, Filtering, Pagination, Search, and Extra UI Components

Step 1: Create the HTML Structure

Step 2: Style the Table with CSS

Step 3: Implement Sorting, Filtering, Search, and Pagination with JavaScript

How It Works

Next Steps

Read More

Shopping Fun in Maryland and Maui

How to Set Up a Hacking Lab at Home

Grocery Store? More Like Adventure Park

How To Implement Facebook Auto-login On A Website

Introduction to Python

Join

Language

Advanced Table using HTML, CSS, and JavaScript with Sorting, Filtering, Pagination, Search, and Extra UI Components

Step 1: Create the HTML Structure

Step 2: Style the Table with CSS

Step 3: Implement Sorting, Filtering, Search, and Pagination with JavaScript

How It Works

Next Steps

Read More

Shopping Fun in Maryland and Maui

How to Set Up a Hacking Lab at Home

Grocery Store? More Like Adventure Park

How To Implement Facebook Auto-login On A Website

Introduction to Python