JQUERY - TABLOLARA OTOMATİK SIRALAMA EKLEME

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..

Tarayıcıda Aç

Son Güncelleme : 16 Haziran 2025 10:13, Pazartesi

YORUMLAR () YORUM YAZ

Yorum yapılmamış!

BENZER İÇERİK

JQUERY ile Tabloda Anlık Arama

06 Nisan 2021 12:58, Salı

JQUERY BAĞLANTISI NASIL YAPILıR?

02 Nisan 2024 23:36, Salı

JQUERY NEDİR?

03 Nisan 2024 09:52, Çarşamba