How To

Cara Mengurutkan List

Di bawah ini kita akan mempelajari cara mengurutkan daftar (sort a list) pada HTML, menggunakan JavaScript.

<!DOCTYPE html>
<html>
<title>Urutkan List HTML di Bawah Menurut Abjad</title>
<body>

<p>Klik tombol untuk mengurutkan daftar menurut abjad:</p>
<button >var list, i, switching, b, shouldSwitch;
  list = document.getElementById("id01");
  switching = true;
  /* Buat loping yang akan berlanjut sampai
   tidak ada peralihan yang dilakukan: */  while (switching) {
    // mulailah dengan mengatakan: tidak ada switching yang dilakukan:
    switching = false;
    b = list.getElementsByTagName("LI");
    // Ulangi semua item daftar:
    for (i = 0; i < (b.length - 1); i++) {
      // mulailah dengan mengatakan seharusnya tidak ada switching:
      shouldSwitch = false;
      /* periksa apakah item berikutnya harus
       bertukar tempat dengan item saat ini: */      if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
        /* jika item berikutnya sesuai abjad
         lebih rendah dari item saat ini, tandai sebagai switch
         dan memutuskan loopingnya: */        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /* Jika switch yang telah ditandai, lakukan switching
       dan tandai switch sebagai selesai: */      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
    }
  }
}
</script>

</body>
</html>

Membuat Fungsi Sortir

Contoh

<ul id="id01">
  <li>Oslo</li>
  <li>Stockholm</li>
  <li>Helsinki</li>
  <li>Berlin</li>
  <li>Rome</li>
  <li>Madrid</li>
</ul>

<script>
function sortList() {
  var list, i, switching, b, shouldSwitch;
  list = document.getElementById("id01");
  switching = true;
  /* Buat loping yang akan berlanjut sampai
   tidak ada peralihan yang dilakukan: */  while (switching) {
    // mulailah dengan mengatakan: tidak ada switching yang dilakukan:
    switching = false;
    b = list.getElementsByTagName("LI");
    // Ulangi semua item daftar:
    for (i = 0; i < (b.length - 1); i++) {
      // mulailah dengan mengatakan seharusnya tidak ada switching:
      shouldSwitch = false;
      /* periksa apakah item berikutnya harus
       bertukar tempat dengan item saat ini: */      if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
        /* jika item berikutnya sesuai abjad
         lebih rendah dari item saat ini, tandai sebagai switch
         dan memutuskan loopingnya: */        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /* Jika switch yang telah ditandai, lakukan switching
       dan tandai switch sebagai selesai: */      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
    }
  }
}
</script>

Mengurutkan Ascending dan Descending

Pertama kali Anda mengklik tombol, arah pengurutan adalah naik (A ke Z).

Contoh

<!DOCTYPE html>
<html>
<title>Urutkan List HTML di Bawah Menurut Abjad</title>
<body>

<p> Klik tombol untuk mengurutkan  list ascending (A ke Z): </p>
<p> Klik lagi untuk mengurutkan list descending (Z ke A): </p>

<button >dir, switchcount = 0;
  list = document.getElementById("id01");
  switching = true;
  // Atur arah penyortiran ke ascending:
  dir = "asc"; 
  // Buat loop yang akan berlanjut sampai tidak ada switching yang dilakukan:
  while (switching) {
    // mulailah dengan mengatakan: tidak ada switching yang dilakukan:
    switching = false;
    b = list.getElementsByTagName("LI");
    // Ulangi semua item daftar:
    for (i = 0; i < (b.length - 1); i++) {
      // mulailah dengan mengatakan seharusnya tidak ada switching:
      shouldSwitch = false;
      /* periksa apakah item berikutnya harus bertukar tempat dengan item saat ini,
       berdasarkan arah pengurutan (asc atau desc): */      if (dir == "asc") {
        if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
          /* jika item berikutnya menurut abjad lebih rendah dari item saat ini,
           tandai sebagai switch dan hentikan looping: */          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (b[i].innerHTML.toLowerCase() < b[i + 1].innerHTML.toLowerCase()) {
          /* jika item berikutnya secara abjad lebih tinggi dari item saat ini,
           tandai sebagai switch dan hentikan looping: */          shouldSwitch= true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /* Jika sakelar telah ditandai, lakukan sakelar
       dan tandai bahwa sakelar telah dilakukan: */      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
      // Setiap kali switching selesai, tingkatkan switchcount sebanyak 1:
      switchcount ++;
    } else {
      /* Jika tidak ada switching yang dilakukan DAN arahnya adalah "ascending",
       atur arah ke "descending" dan jalankan while loop lagi. */      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>
</body>
</html>

Sortir List Secara Numerik

Contoh

<!DOCTYPE html>
<html>
<title> Menyortir Lis HTML Secara Numerik </title>
<body>

<p> Klik tombol untuk mengurutkan list secara numerik: </p>
<button >

Hanifah Nurbaeti

Share
Tags: How Tolist