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 onclick="sortList()">List</button> <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> </body> </html>
Section Artikel
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 onclick="sortListDir()">Sort</button>
<ul id="id01">
<li>Oslo</li>
<li>Stockholm</li>
<li>Helsinki</li>
<li>Berlin</li>
<li>Rome</li>
<li>Madrid</li>
</ul>
<script>
function sortListDir() {
var list, i, switching, b, shouldSwitch, 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 onclick="sortList()">Sort</button>
<ul id="id01">
<li>6</li>
<li>12</li>
<li>15</li>
<li>724</li>
<li>1000</li>
<li>50284234</li>
<li>1</li>
<li>1400</li>
</ul>
<script>
function sortList() {
var list, i, switching, b, shouldSwitch;
list = document.getElementById("id01");
switching = true;
/*Buat looping 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 list item:
for (i = 0; i < (b.length - 1); i++) {
// mulailah dengan mengatakan seharusnya tidak adaswitching:
shouldSwitch = false;
/* periksa apakah item berikutnya harus
bertukar tempat dengan item saat ini: */
if (Number(b[i].innerHTML) > Number(b[i + 1].innerHTML)) {
/* jika item berikutnya adalah numerik
lebih rendah dari item saat ini, tandai sebagai switch
dan hentikan looping: */
shouldSwitch = true;
break;
}
}
if (shouldSwitch) {
/* Jika switch telah ditandai, lakukan switching
dan tandai switch sebagai selesai: */
b[i].parentNode.insertBefore(b[i + 1], b[i]);
switching = true;
}
}
}
</script>
</body>
</html>
