How To

Cara Mengurutkan Tabel

Di bawah ini kita akan mempelajari cara mengurutkan tabel HTML, menggunakan JavaScript.

Klik tombol untuk mengurutkan tabel menurut abjad, berdasarkan nama pelanggan:

<!DOCTYPE html>
<html>
<head>
<title>Sort a HTML Table Alphabetically</title>
<style>
table {
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th, td {
  text-align: left;
  padding: 16px;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}
</style>
</head>
<body>

<p>Klik tombol untuk mengurutkan tabel menurut abjad, berdasarkan nama:</p>
<p><button >var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;
  /*Buat looping yang akan berlanjut sampai
   tidak ada switching yang dilakukan:*/  while (switching) {
    //mulai dengan: belum ada switching yang selesai:
    switching = false;
    rows = table.rows;
    /*Ulangi melalui semua baris tabel (kecuali
     pertama, yang berisi header tabel):*/    for (i = 1; i < (rows.length - 1); i++) {
      //mulailah dengan mengatakan seharusnya tidak ada switching:
      shouldSwitch = false;
      /*Dapatkan dua elemen yang ingin dibandingkan,
       satu dari baris saat ini dan satu dari baris berikutnya:*/      x = rows[i].getElementsByTagName("TD")[0];
      y = rows[i + 1].getElementsByTagName("TD")[0];
      //periksa apakah kedua baris harus bertukar tempat:
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        // jika demikian, tandai sebagai switching dan hentikan looping:
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /*Jika switch telah ditandai, lakukan switching
       dan tandai bahwa switch telah dilakukan:*/      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}
</script>

</body>
</html>

Membuat Fungsi Sortir

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Sort a HTML Table Alphabetically</title>
<style>
table {
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th, td {
  text-align: left;
  padding: 16px;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}
</style>
</head>
<body>

<p>Klik tombol untuk mengurutkan tabel menurut abjad, berdasarkan nama:</p>
<p><button >

Urutkan Tabel dengan Mengklik Header

Klik header untuk mengurutkan tabel.

Klik “Nama” untuk mengurutkan berdasarkan nama dan “Negara” untuk mengurutkan berdasarkan negara.

Pertama kali kita mengklik, arah pengurutannya adalah menaik (A ke Z).

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Sort a HTML Table Alphabetically</title>
<style>
table {
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th {
  cursor: pointer;
}

th, td {
  text-align: left;
  padding: 16px;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}
</style>
</head>
<body>

<p><strong>Klik header untuk mengurutkan tabel. </strong> </p>
<p> Pertama kali  mengeklik, arah pengurutan adalah ascending (A ke Z). </p>
<p> Klik lagi, dan arah pengurutan akan descending (Z ke A): </p>

<table id="myTable">
  <tr>
   <!--Saat header diklik, jalankan fungsi sortTable, dengan parameter, 0 untuk mengurutkan berdasarkan nama, 1 untuk mengurutkan berdasarkan negara:-->  
    <th >dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  //Atur arah penyortiran ke ascending:
  dir = "asc"; 
  /*Buat looping yang akan berlanjut sampai
   tidak ada switching yang dilakukan:*/  while (switching) {
    //mulailah dengan mengatakan: tidak ada switching yang dilakukan:
    switching = false;
    rows = table.rows;
    /*Ulangi melalui semua baris tabel (kecuali
     pertama, yang berisi header tabel):*/    for (i = 1; i < (rows.length - 1); i++) {
      //mulailah dengan mengatakan seharusnya tidak ada switching:
      shouldSwitch = false;
      /*Dapatkan dua elemen yang ingin dibandingkan,
       satu dari baris saat ini dan satu dari baris berikutnya:*/      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /*periksa apakah dua baris harus bertukar tempat,
       berdasarkan arah, asc atau desc:*/      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          //jika demikian, tandai sebagai switcing dan hentikan looping:
          shouldSwitch= true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          //jika demikian, tandai sebagai switch dan hentikan looping:
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /*Jika switch telah ditandai, lakukan switching
       dan tandai bahwa switch telah dilakukan:*/      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      //Setiap kali switching dilakukan, tingkatkan hitungan ini dengan 1:
      switchcount ++;      
    } else {
      /*Jika tidak ada switching yang dilakukan DAN arahnya adalah "ascending",
       atur arah ke "desc" dan jalankan while loop lagi.*/      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

</body>
</html>

Sortir Tabel Secara Numerik

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Sort a HTML Table Numerically</title>
<style>
table {
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th, td {
  text-align: left;
  padding: 16px;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}
</style>
</head>
<body>

<p>Click the button to sort the table numerically:</p>
<p><button >

Hanifah Nurbaeti

Share
Tags: How Tolist