Membuat Sort List Ascending dan Descending pada Table

Halo TimUR, Yoke balik lagi nih sama Cermi yang semoga saja berguna. Yoke mau membuat Sort List Ascending dan Descending pada Table yang sebelumnya sudah bisa memfilter sesuai apa yang kita input pada cermi yang ada disini. Bagaimana caranya agar bisa seperti itu? Yuk langsung aja kita mulai.

Langkahnya cukup simple sekali, dari source code yang sudah dibuat sebelumnya pada cermi disini setelah script javascript tambahkan lagi tag script baru dan masukkan code berikut ini :

<script>
function sortTable(n) {
 var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
 table = document.getElementById("myTable");
 switching = true;
 //Set sorting untuk ascending
 dir = "asc"; 
 /*Membuat looping yang akan terus berlanjut
hingga kondisi done*/
 while (switching) {
 //memulai dengan mengatakan: no switching is done:
 switching = false;
 rows = table.getElementsByTagName("TR");
 /*Looping ke semua Rows kecuali row pertama
yang merupakan header:*/
 for (i = 1; i < (rows.length - 1); i++) {
 //memulai dengan mengatakan: should be no switching:
 shouldSwitch = false;
 /*Mendapatkan element untuk dibandingkan,
 satu dari row yang saat ini, satu lagi dari row setelahnya:*/
 x = rows[i].getElementsByTagName("TD")[n];
 y = rows[i + 1].getElementsByTagName("TD")[n];
 /*mengecek apakah row tadi berpindah tempat atau tidak,
 sesuai arahnya, asc atau desc:*/
 if (dir == "asc") {
 if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
 //jika iya, tandai sebagai untuk pindah dan hentikan loop:
 shouldSwitch= true;
 break;
 }
 } else if (dir == "desc") {
 if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
 //jika iya, tandai sebagai untuk pindah dan hentikan loop:
 shouldSwitch= true;
 break;
 }
 }
 }
 if (shouldSwitch) {
 /*Jika perpindahan sudah ditandai, lakukan perpindahan row
 dan menandai bahwa perpindahan row telah dilakukan:*/
 rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
 switching = true;
 //Setiap kali switch dilakukan, tambah 1:
 switchcount ++; 
 } else {
 /*Jika tidak ada perpindahan yang dilakukan dan arahnya adalah"asc",
 set menjadi "desc" dan jalankan loop lagi*/
 if (switchcount == 0 && dir == "asc") {
 dir = "desc";
 switching = true;
 }
 }
 }
}
</script>

Pada source code diatas sudah Yoke berikan komen event apa saja yang terjadi agar memudhakan pemahan dari logika pemrograman yang sedang terjadi. Bagaimana cara melakukan sorting? tinggal klik pada Nama atau Jurusan, klik pertama akan melakukan sort Ascending, klik sekali lagi menjadi Descending. Hasilnya adalah seperti ini :

*Perhatikan perubahan pada baris table

Table saat belum ada sorting

Table Ascending

Table Descending

Lebih mudah kan dengan sorting melihat informasi yang ada di table, sorting pun juga berlaku bagi bagi row nama maupun row jurusan. Semoga bermanfaat untuk semuanya. Happy Coders !

157 Total Views 1 Views Today
Views All Time
Views All Time
148
Views Today
Views Today
1

Article written by

This is your Bio

Leave a Reply

You must be logged in to post a comment.