Membuat Sort Pada List Data Menggunakan Javascript
Hallo teman-teman Source Code Aplikasi. Kembali lagi dengan saya Shelli Ripati di Kursus Situs. Kali ini saya akan membahas mengenai cara Membuat Sort Pada List Data Menggunakan Javascript. Dimana ketika tombol di tekan karenanya data akan mengerjakan sort ascending maupun descending.
Oke seketika saja kita mulai bagi Membuat Sort Pada List Data Menggunakan Javascript dengan merancang struktur htmlnya terlebih dahulu seperti di script di bawah ini.
<!DOCTYPE html>
<html>
<title>Membangun Sort Di List Data Menggunakan Javascript</title>
<body>
<div class=container>
<p>Klik Tombol bagi sort list data ascending (A to Z):</p>
<p>Klik lagi bagi 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>
Seandainya telah selesai karenanya seketika saja kita bikin style cssnya seperti di 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 dapat seketika merancang javascriptnya, dimana nanti script ini yang akan merancang sort di list di 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>
Seandainya telah selesai teman-teman jangan lupa di simpan dengan format html dan kemudian teman-teman dapat jalankan di browser masing-masing. Karenanya tampilannya akan seperti di gambar di bawah ini.
Teman-teman dapat perhatikan gambar di atas dimana list data di sort merujuk pada ascending. Dan sekiranya diklik tombolnya lagi karenanya list data akan mengerjakan sort descending.
Demikian artikel mengenai cara Membuat Sort Pada List Data Menggunakan Javascript. Semoga Bermanfaat dan selamat mencoba.
Sumber https://kursuswebsite.org
