Sort dan Search Data Tabel

Tinggalkan Balasan

JSSortSearchData

Fitur pengurutan (sort) data dan pencarian (search) data merupakan fitur yang umum diperlukan dalam aplikasi web. Kita bisa membuatnya dengan bantuan library seperti jquery dan datatables.
Kali ini saya akan memberikan cara membuat fitur sort dan search data dalam table menggunakan fungsi javascript tanpa library.

Ada 2 fungsi yang kita buat:

  • fungsi searchTable()
  • fungsi sortTable(), yang dapat melakukan sort data huruf (alphabet), angka (numeric) dan tanggal (date)

Fungsi resetHeader() digunakan untuk mengembalikan kolom header tabel supaya ketika kolom header di click, tanda panah ke atas ↑ (sort ascending) atau ke bawah ↓ (sort descending)  hanya tampil di kolom yang di click. Header kolom disimpan dalam variable array headerCol.

Berikut coding selengkapnya.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sort Search Data in Table</title>
<style>
html,body{font:12px Arial,Helvetica,sans-serif;}
.cari {padding:5px;border:1px solid #ddd;}
#table1 {border-collapse:collapse;}
#table1 th {padding:12px;text-align:center;background-color:#f0f0f0;cursor:pointer;}
#table1 th, #table1 td {border:1px solid #ddd;padding:6px;}
#table1 tr:nth-child(odd){background-color: #f1f1f1;}
#table1 tr:hover {background-color:#f8f8f8;}
</style>
</head>
<body>
<h2>Tabel Versi Android</h2>
<p><input type="text" id="1" class="cari" onkeyup="searchTable(1)" size="10" placeholder="Cari Nama...">
<input type="text" id="3" class="cari" onkeyup="searchTable(3)" size="10" placeholder="Cari Rilis..."></p>
<table id="table1">
  <tr>
    <th onclick="sortTable('num',0)">No.</th>
	<th onclick="sortTable('alfa',1)">Nama</th>
    <th onclick="sortTable('num',2)">Versi</th>
    <th onclick="sortTable('date',3)">Rilis</th>
  </tr>
  <tr>
    <td>1</td>
	<td>Froyo</td>
    <td>2.2</td>
    <td>10 May 2010</td>
  </tr>
  <tr>
    <td>2</td>
	<td>Gingerbread</td>
    <td>2.3</td>
    <td>6 Dec 2010</td>
  </tr>
  <tr>
    <td>3</td>
	<td>Honeycomb</td>
    <td>3.0</td>
    <td>22 Feb 2011</td>
  </tr>
  <tr>
    <td>4</td>
	<td>Ice Cream Sandwich</td>
    <td>4.0</td>
    <td>19 Oct 2011</td>
  </tr>
  <tr>
    <td>5</td>
	<td>Jelly Bean</td>
    <td>4.1</td>
    <td>9 Jul 2012</td>
  </tr>
  <tr>
    <td>6</td>
	<td>Kitkat</td>
    <td>4.4</td>
    <td>31 Oct 2013</td>
  </tr>
  <tr>
    <td>7</td>
	<td>Lollipop</td>
    <td>5.0</td>
    <td>12 Nov 2014</td>
  </tr>
  <tr>
    <td>8</td>
	<td>Marshmallow</td>
    <td>6.0</td>
    <td>28 May 2015</td>
  </tr>
  <tr>
    <td>9</td>
	<td>Nougat</td>
    <td>7.0</td>
    <td>22 Aug 2016</td>
  </tr>
  <tr>
    <td>10</td>
	<td>Oreo</td>
    <td>8.0</td>
    <td>21 Aug 2017</td>
  </tr>
</table>
<script>
var cols = document.getElementById('table1').rows[0].cells;
var headerCol = new Array();
for (var i = 0; i < (cols.length); i++) {
	headerCol[i]=cols[i].textContent;
}
	
function searchTable(col) {
  var input, filter, table, tr, td, i;
  input = document.getElementById(col);
  filter = input.value.toUpperCase();
  table = document.getElementById("table1");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    if(col=='1') td = tr[i].getElementsByTagName("td")[1];
	else if(col=='3') td = tr[i].getElementsByTagName("td")[3];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }     
  }
}
function resetHeader(){
	var c = document.getElementById('table1').rows[0].cells;
	for (var i = 0; i < (c.length); i++) {
		c[i].textContent=headerCol[i];
	}
}
function sortTable(d,n) {
  var table, rows, col_header, switching, i, x, y, a,b,shouldSwitch, dir = "asc", switchcount = 0;
  table = document.getElementById("table1");
  rows = table.getElementsByTagName("tr");
  col_header  = rows[0].getElementsByTagName("th")[n];
  switching = true;
  while (switching) {
	switching = false;    
    for (i = 1; i < (rows.length - 1); i++) {
		shouldSwitch = false;
		x = rows[i].getElementsByTagName("td")[n];
		y = rows[i + 1].getElementsByTagName("td")[n];
		if (d=="num")
		{	a = Number(x.innerHTML);
			b = Number(y.innerHTML);
		} else if (d=="alfa")
		{	a = x.innerHTML.toLowerCase();
			b = y.innerHTML.toLowerCase();
		} else if (d=="date")
		{	a = Date.parse(x.innerHTML);
			b = Date.parse(y.innerHTML);
		}
		if (dir == "asc") {
			if (a > b) {
			  shouldSwitch = true;
			  break;
			}
		} else if (dir == "desc") {
			if (a < b) {
			  shouldSwitch = true;
			  break;
			}
		}
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      switchcount ++;
    } else {
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }	
  }
  resetHeader();
  if (dir == "asc") {col_header.textContent =  headerCol[n] + " \u2191";}
  if (dir == "desc") {col_header.textContent = headerCol[n] + " \u2193";}
}
</script>
</body>
</html>

 Selamat mencoba dan semoga bermanfaat.

Leave your comment