Membuat Sort Pada List Data Menggunakan Javascript

Hallo teman-teman Dumet School. Kembali lagi dengan saya Shelli Ripati di Kursus Website. Kali ini saya akan membahas tentang cara Membuat Sort Pada List Data Menggunakan Javascript. Dimana ketika tombol di tekan maka data akan melakukan sort ascending maupun descending.

Oke langsung saja kita mulai untuk Membuat Sort Pada List Data Menggunakan Javascript dengan membuat struktur htmlnya terlebih dahulu seperti pada script di bawah ini.

<!DOCTYPE html>
<html>
<title>Membuat Sort Pada List Data Menggunakan Javascript</title>
<body>
  <div class="container">
    <p>Klik Tombol untuk sort list data ascending (A to Z):</p>
    <p>Klik lagi untuk sort list data descending (Z to A):</p>

    <button onclick="sortListDir()">Sort</button>

    <ul id="id01">
      <li>Shelli</li>
      <li>Rifkie</li>
      <li>Anggi</li>
      <li>Alvi</li>
      <li>Chelsea</li>
      <li>Prapti</li>
    </ul>
 </div>
</body>
</html>

Jika sudah selesai maka langsung saja kita buat style cssnya seperti pada script di bawah ini.

<style>   
    *{padding: 0; margin:0;}
    .container{background: salmon; margin:auto; width: 500px;padding: 10px;}
    li{list-style-position: inside;}
    button{padding: 0 10px;}
</style>

Dan langkah terakhir teman-teman bisa langsung membuat javascriptnya, dimana nanti script ini yang akan membuat sort pada list pada ketika tombol kita klik. Dan berikut scriptnya ya teman-teman.

<script>
function sortListDir() {
  var list, i, switching, b, shouldSwitch, dir, switchcount = 0;
  list = document.getElementById("id01");
  switching = true;
  dir = "asc"; 
  while (switching) {
    switching = false;
    b = list.getElementsByTagName("LI");
    //Loop through all list-items:
    for (i = 0; i < (b.length - 1); i++) {
      shouldSwitch = false;
      if (dir == "asc") {
        if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
          shouldSwitch= true;
          break;
        }
      } else if (dir == "desc") {
        if (b[i].innerHTML.toLowerCase() < b[i + 1].innerHTML.toLowerCase()) {
          shouldSwitch= true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
      switchcount ++;
    } else {
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

Jika sudah selesai teman-teman jangan lupa di simpan dengan format html dan kemudian teman-teman bisa jalankan di browser masing-masing. Maka tampilannya akan seperti pada gambar di bawah ini.

Teman-teman bisa perhatikan gambar di atas dimana list data di sort berdasarkan ascending. Dan jika diklik tombolnya lagi maka list data akan melakukan sort descending.

Demikian artikel tentang cara Membuat Sort Pada List Data Menggunakan Javascript. Semoga Bermanfaat dan selamat mencoba.

Membuat Sort Pada List Data Menggunakan Javascript

Kategori