Jinsi ya Kutengeneza Dynamic Table Sorting kwa JavaScript

Kutengeneza dynamic table sorting kunawawezesha watumiaji kupanga data kwenye table kwa column yoyote bila refreshing page. Hii inaboresha user experience kwenye dashboards, reports, au list za data.

Hatua kwa Hatua
1️⃣ Unda HTML Table
<table id="myTable" border="1">
<thead>
<tr>
<th onclick="sortTable(0)">Jina</th>
<th onclick="sortTable(1)">Umri</th>
<th onclick="sortTable(2)">Jiji</th>
</tr>
</thead>
<tbody>
<tr><td>Faustine</td><td>28</td><td>Dar es Salaam</td></tr>
<tr><td>Amina</td><td>25</td><td>Arusha</td></tr>
<tr><td>Kwaku</td><td>30</td><td>Mwanza</td></tr>
</tbody>
</table>

2️⃣ JavaScript kwa Sorting
function sortTable(columnIndex) {
const table = document.getElementById("myTable");
const tbody = table.tBodies[0];
const rows = Array.from(tbody.querySelectorAll("tr"));

const isNumeric = !isNaN(rows[0].cells[columnIndex].innerText);

// Toggle sort direction
let dir = table.getAttribute("data-sort-dir") === "asc" ? "desc" : "asc";
table.setAttribute("data-sort-dir", dir);

rows.sort((a, b) => {
let valA = a.cells[columnIndex].innerText;
let valB = b.cells[columnIndex].innerText;

if (isNumeric) {
valA = parseFloat(valA);
valB = parseFloat(valB);
}

if (dir === "asc") return valA > valB ? 1 : -1;
else return valA < valB ? 1 : -1;
});

// Append sorted rows
rows.forEach(row => tbody.appendChild(row));
}

3️⃣ Faida za Dynamic Table Sorting

Hufanya data kuwa interactive kwa user.

Hakuna page refresh, yote ni kwa client-side.

Inasaidia kwenye dashboards, reports, au tables za mawasiliano.

Inaruhusu sorting ya multiple types, text au numbers.

🔗 Links Za Kujifunza Zaidi

🌐 Faulink Official Website: https://www.faulink.com/

📘 Jifunze Web Design & Programming (Tutorials / Mifumo): https://www.faulink.com/excel_mifumo.php

📲 Piga / WhatsApp kwa msaada wa haraka: https://wa.me/255693118509