Bu uygulama ile tablo başlıkları tıklandığında, satırları o alana göre arta yada azalan sıralayabilirsiniz.. Tablo üzerinde bir şey eklemenize gerek yok (Id tanımlaması vs). Script otomatik oalrak tabloyu ve tablodaki TH etiketlerini bularak, başlıklar tıklandığında artan yazda azalan sıralama sağlar. Ayrıca başlık yanına "ikon" ekleyerek sıralamanın yönünü gösterir..
Uygulamanın düzgün çalışabilmesi için tablonuzun HTML 5 yapısnda olması ve THEAD bölümü içerisinde TH etiketlerinin bulunması gerekir..
UYGULAMA ÖZELLİKLERİ
- Tabloda herhangi bir değişiklik yapılmasına gerek yoktur.
- Script sayfa eklendiğinde tüm tablolarda otomatik sıralama yapılır.
- Sıralama için tablo başlıklarına tıklanmalıdır.
- Tıklanan tablo başlığının yanında "ok" işareti ile sıralama yönü gösterilir.Varsa diğer başlıkların yanındaki ok işareti kaldırılır.
TABLO YAPISI
Estetik görünüm için bootstrap5 classları kullşanarak birtablo ekledim. Yukarıda yazdığım gibi tablonun bir THEAD bölümü var ve bölüm içerisinde sütun başlıkları TH etiketleri ile belirtilmiş..
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>OTOMATİK SIRALAMA</title>
</head>
<body>
<div class="container mt-5">
<h1>OTOMATİK TABLO SIRALAMA</h1>
<table class="table mt-5">
<thead>
<tr>
<th>ID</th>
<th>Yazar</th>
<th>Kitap</th>
<th>Gizli</th>
</tr>
</thead>
<tbody>
<tr>
<td> 100</td>
<td>Franz KAFKA</td>
<td>Milenaya Mektuplar</td>
<td>EVET</td>
</tr>
<tr>
<td> 101</td>
<td>Sabahattin ALİ</td>
<td>İçimizdeki Şeytan</td>
<td>HAYIR</td>
</tr>
<tr>
<td> 102</td>
<td>Dostoyevski</td>
<td>Yeraltından Notlar</td>
<td>EVET</td>
</tr>
<tr>
<td> 103</td>
<td>Yaşar KEMAL</td>
<td>İnce Memed</td>
<td>EVET</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
JQUERY SCRIPT
Yazacağımız fonksiyon JQUERY içeridği için öncelikle jquery bvağlantısını sayfaya eklemeyi unutmayın.
JQUERY
<!-- JQUERY BAĞLANTISI -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("table").each(function () {
const tablo = $(this);
const basliklar = tablo.find("thead th");
let siralamaYon = {};
// Orijinal başlıkları data-original-text olarak sakla
basliklar.each(function () {
const th = $(this);
th.attr("data-original-text", th.text().trim());
th.css("cursor", "pointer");
});
basliklar.each(function (index) {
$(this).on("click", function () {
const th = $(this);
const tbody = tablo.find("tbody");
const satirlar = tbody.find("tr").get();
// Önce tüm başlıklara orijinal metni geri koy (okları temizle)
basliklar.each(function () {
const orijinal = $(this).attr("data-original-text");
$(this).text(orijinal);
});
// Sıralama yönünü tersine çevir veya başlat
siralamaYon[index] = !siralamaYon[index];
// Ok işaretini ekle
const ok = siralamaYon[index] ? " ▲" : " ▼";
const yeniYazi = th.attr("data-original-text") + ok;
th.text(yeniYazi);
// Satırları sırala
satirlar.sort(function (a, b) {
let aText = $(a).children().eq(index).text().trim();
let bText = $(b).children().eq(index).text().trim();
const aNum = parseFloat(aText.replace(",", "."));
const bNum = parseFloat(bText.replace(",", "."));
if (!isNaN(aNum) && !isNaN(bNum)) {
return siralamaYon[index] ? aNum - bNum : bNum - aNum;
} else {
return siralamaYon[index]
? aText.localeCompare(bText)
: bText.localeCompare(aText);
}
});
// Tabloya satırları yeniden ekle
$.each(satirlar, function (i, tr) {
tbody.append(tr);
});
});
});
});
});
</script>
Tablolarda , özel sütunlar varsa (ikonlar , sqitch butonlar vs) kodalrı özelleştirebilirsiniz..
