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 onclick="sortTable()">Sort</button></p>

<table id="myTable">
  <tr>
    <th>Name</th>
    <th>Negara</th>
  </tr>
  <tr>
    <td>Bernard Alfonso</td>
    <td>Swedia</td>
  </tr>
  <tr>
    <td>Kim Tae Hee</td>
    <td>Korea  Selatan</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Jerman</td>
  </tr>
  <tr>
    <td>Alfa fa</td>
    <td>Amerika Serikat</td>
  </tr>
  <tr>
    <td>Magdalena</td>
    <td>Itali</td>
  </tr>
  <tr>
    <td>Rowoon</td>
    <td>Korea SElatan</td>
  </tr>
  <tr>
    <td>Ayu</td>
    <td>Indonesia</td>
  </tr>
  <tr>
    <td>Dafa</td>
    <td>Kanada</td>
  </tr>
</table>

<script>
function sortTable() {
  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>

Section Artikel

1 Membuat Fungsi Sortir
2 Urutkan Tabel dengan Mengklik Header
3 Sortir Tabel Secara Numerik

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 onclick="sortTable()">Sort</button></p>

<table id="myTable">
  <tr>
    <th>Name</th>
    <th>Negara</th>
  </tr>
  <tr>
    <td>Bernard Alfonso</td>
    <td>Swedia</td>
  </tr>
  <tr>
    <td>Kim Tae Hee</td>
    <td>Korea  Selatan</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Jerman</td>
  </tr>
  <tr>
    <td>Alfa fa</td>
    <td>Amerika Serikat</td>
  </tr>
  <tr>
    <td>Magdalena</td>
    <td>Itali</td>
  </tr>
  <tr>
    <td>Rowoon</td>
    <td>Korea SElatan</td>
  </tr>
  <tr>
    <td>Ayu</td>
    <td>Indonesia</td>
  </tr>
  <tr>
    <td>Dafa</td>
    <td>Kanada</td>
  </tr>
</table>

<script>
function sortTable() {
  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>

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 onclick="sortTable(0)">Name</th>
    <th onclick="sortTable(1)">Negara</th>
  </tr>
  <tr>
    <th>Name</th>
    <th>Negara</th>
  </tr>
  <tr>
    <td>Bernard Alfonso</td>
    <td>Swedia</td>
  </tr>
  <tr>
    <td>Kim Tae Hee</td>
    <td>Korea  Selatan</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Jerman</td>
  </tr>
  <tr>
    <td>Alfa fa</td>
    <td>Amerika Serikat</td>
  </tr>
  <tr>
    <td>Magdalena</td>
    <td>Itali</td>
  </tr>
  <tr>
    <td>Rowoon</td>
    <td>Korea SElatan</td>
  </tr>
  <tr>
    <td>Ayu</td>
    <td>Indonesia</td>
  </tr>
  <tr>
    <td>Dafa</td>
    <td>Kanada</td>
  </tr>
</table>

<script>
function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, 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 onclick="sortTable()">Sort</button></p>

<table id="myTable">
  <tr>
    <th>ID</th>
    <th>Nama</th>
  </tr>
  <tr>
    <td>5</td>
    <td>Bernard</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Agan</td>
  </tr>
  <tr>
    <td>6</td>
    <td>Albert</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Keenan</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Athar</td>
  </tr>
  <tr>
    <td>7</td>
    <td>Paris </td>
  </tr>
  <tr>
    <td>4</td>
    <td>Dingsding</td>
  </tr>
 
</table>

<script>
function sortTable() {
  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) {
    //mulailah dengan mengatakan: tidak ada peralihan :
    switching = false;
    rows = table.rows;
    /*Looping 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 (Number(x.innerHTML) > Number(y.innerHTML)) {
        //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>

How To list

Cara Mengurutkan Tabel

Membuat Fungsi Sortir

Urutkan Tabel dengan Mengklik Header

Sortir Tabel Secara Numerik

7 Aturan Emas Dalam Design Thinking

Cara Membuat Tabel Bergaris Zebra

You may also like