Filter Baris pada Table dengan jQuery

October 22, 2013 by · 2 Comments 

Pada konferensi CECAR 6 (6th Civil Engineering Conference in Asia Region) yang dilaksanakan Agustus kemaren, saya ikut membantu membuat sebuah aplikasi berbasis web yang digunakan untuk menampilkan daftar dan isi proceeding konferensi tersebut. Saya membuat daftar judul proceeding dengan menggunakan tabel, mirip dengan aplikasi pengolah spreadsheet, tapi kali ini ditampilkan di web.

Agar fungsi aplikasi ini bisa maksimal, saya perlu menambahkan fungsi filter yang membatasi daftar judul berdasarkan hasil pencarian atau kategori judul proceeding. Oleh karena itu, saya membuat sebuah elemen input sebagai search box dan sebuah elemen html select yang memuat daftar kategori. Saya menginginkan agar fungsi filter ini bisa digunakan secara realtime atau hasilnya langsung bisa ditampilkan begitu ada perubahan pada inputan filter tersebut. Untuk mempermudah, saya menggunakan library javascript jQuery agar proses development bisa berjalan lebih cepat.

Tabel saya beri id #table_paper, elemen input search box saya beri id #search, dan input seleksi kategori saya beri id #category.

<!-- Elemen HTML untuk filter -->
<input type="text" name="search" id="search">
<select id="category">
	<option value="all">All</option>
	<option value="key">Keynote</option>
	<option value="short">Short Course</option>
	<option value="cat1">Advanced Construction Technologies</option>
	<option value="cat2">Analytical and Design Methods</option>
	...
</select>
 
<!-- Tabel -->
<table class="table table-bordered table-hover tablesorter" id="table_paper">
	<thead>
	<tr>
		<td><strong>PAPER ID</strong></td>
		<td><strong>TITLE</strong></td>
		<td><strong>AUTHORS</strong></td>
		<td><strong>COUNTRY</strong></td>
		<td><strong>DOWNLOAD</strong></td>
	</tr>
	</thead>
	<tbody>
	<tr class="cat11 all">
		<td class="idpaper">16</td>
		<td class="title">FOOTING REINFORCEMENT METHOD BY STEEL SHEET PILES WITH CLOSED SECTIONS</td>
		<td class="author">Hiroaki Nakayama, Noriyoshi Harata, and Atsushi Kato</td>
		<td class="country">Japan</td>
		<td class="pdf"><a href="file/proceeding/Paper 016.pdf">PDF</a></td>
	</tr>
	<tr class="cat7 all">
		<td class="idpaper">17</td>
		<td class="title">RISK FACTOR IDENTIFICATION IN THE MANUFACTURING PROCESS OF HOLLOW CORE SLAB</td>
		<td class="author">Theresita Herni Setiawan, and Ihzarmurafi Huza Sukarni</td>
		<td class="country">Indonesia</td>
		<td class="pdf"><a href="file/proceeding/Paper 017.pdf">PDF</a></td>
	</tr>
	...
	</tbody>
</table>

Fungsi javascript untuk filter diberikan pada kode di bawah ini. Baris 2-5 adalah fungsi tambahan agar filter bersifat case-insensitive (huruf besar/kecil akan memberikan hasil yang sama).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(document).ready(function(){
	jQuery.expr[':'].contains = function(a, i, m) {
		return jQuery(a).text().toUpperCase()
			.indexOf(m[3].toUpperCase()) >= 0;
	};
 
	var all_content = $("#table_paper").parent().html();
	// Detect events
	$("#search").keyup(function(){
		filter(all_content);
	});
	$('#category').change(function(){
		filter(all_content);
	});
});
 
// Search Function
function filter(all_content){
	$("#table_paper").parent().html(all_content);
	var s = $("#search").val();
	var kat = $("#category").val();
	$("#table_paper tbody tr:not(:contains('" + s + "'))").hide();
	$("#table_paper tbody tr:not([class~='" + kat + "']) ").each(function(){
		$(this).hide();
	});
}

Dinamik DOM dan Konsep Event/Bind dengan jQuery

November 12, 2012 by · 4 Comments 

Sebelum ini, saya tidak begitu memahami konsep binding yang ada pada framework jQuery. Pemahaman saya yang dangkal menyebabkan saya hanya menulis potongan kode dengan konsep “yang penting jalan”. Jadi ketika saya menghadapi masalah yang berkaitan erat dengan konsep event/bind, saya sama sekali tidak tau apa yang menyebabkan kode yang saya tulis tidak jalan di browser.

Beberapa hari ini, saya membuat sebuah web dengan jQuery yang nantinya aplikasi dengan jQuery ini akan menghasilkan web interaktif dengan konten dinamik. Konten dinamik pada web adalah konten yang meminimalisir pergantian halaman dan lebih mengandalkan fungsi javascript untuk memanipulasi langsung DOM (Document Object Model) pada sebuah halaman web. DOM adalah pemodelan elemen-elemen pada web berupa objek yang membentuk web itu sendiri.

Puncak kebodohan saya adalah hari ini ketika saya hendak membuat konten dinamik, saya menemukan satu masalah: ketika saya mengeklik sebuah button, saya berhasil menambahkan sebuah elemen pada web, namun ketika saya mengeklik tomboh lain, saya tidak bisa menghapus elemen yang baru saya tambah barusan, namun anehnya, saya bisa menghapus elemen lain yang sudah diload sejak awal halaman dibuka (bukan hasil penambahan pada DOM lewat jQuery). Apa yang salah ya? 🙂

Sebelumnya, saya hanya tau konsep event/trigger yang ada pada jQuery, ketika suatu elemen diklik, dihover, mendapat event fokus, atau diubah ukurannya, maka kita bisa menjalankan fungsi tertentu sesuai dengan keinginan kita. Konsep ini disebut dengan konsep event/bind. Event adalah aksi yang menjadi pemicu (trigger) untuk menjalankan suatu fungsi. Contoh event ini adalah klik, hover (mengarahkan) mouse pada sebuah link, menekan tombol panah bawah, dan lain sebagainya. Ketika sebuah halaman di-reload untuk pertama kalinya, jQuery mengikat elemen-elemen yang akan dipakai sebagai elemen event. Konsep ini dikenal dengan bind.

Contohnya adalah:

1
2
3
4
5
$(document).ready(function(){
	$('a').bind('click', function(){
		//fungsi di sini ketika sebuah link diklik
	});
});

Namun sayangnya, konsep bind ini hanya bisa dipakai pada batasan tertentu. Karena jQuery hanya mengikat DOM yang direload pertama kali, bind pada jQuery tidak akan mengikat DOM yang dibentuk setelah halaman ditampikan. Contohnya:

1
2
3
4
5
6
7
8
$(document).ready(function(){
	$('a.add').bind('click', function(){
		$(body).append("<p>Hello world</p>"); // menambahkan paragraf di akhir body
	});
	$('a.remove').bind('click', function(){
		$('p:last').remove();  // this will not work :D
	});
});

Dari potongan kode di atas, fungsi remove tidak akan berfungsi dan menghapus paragraf terakhir. Mengapa? Karena bind tidak mengikat konten yang ditambahkan belakangan. Oleh karena itulah jQuery menyediakan sebuah fungsi untuk memantau semua elemen DOM baik itu yang pertama kali direload ataupun konten pada masa mendatang ketika sebuah elemen ditambahkan dengan jQuery.

Fungsi yang dimaksud adalah fungsi live() namun fungsi ini sudah tidak dipakai lagi (deprecated) karena lebih lambat dan memiliki beberapa kekurangan. Sebagai gantinya, jQuery menyediakan fungsi on() untuk memantau event secara terus menerus pada DOM yang saat ini digunakan. Contoh penggunakan live() dan on() diberikan pada potongan kode berikut.

1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
	/* Contoh dengan menggunakan fungsi live() */
	$("a.remove").live('click',function(){
		$('p:last').remove();
	});
	/* Contoh dengan menggunakan fungsi on() */
	$(document).on('click', "a.remove", function(){
		$('p:last').remove();
	});
});

Semoga berguna 😉

Membuat Tabel Perkalian dengan Javascript

September 9, 2009 by · 1 Comment 

Saya pernah membuat kalender dengan c++. Algoritmanya sedikit sulit karena kita harus memperhatikan setiap bagian pada tabel perkalian. Namun dengan menggunakan javascript atau mungkin juga php, kita bisa sedikit lebih mudah dalam membuat script tabel perkalian. Kesempatan ini saya akan memmberi sedikit source code bagaimana membuat tabel perkalian dengan javascript.

Kita akan membagi file dalam 2 bagian,yang pertama adalah file kali.htm dan yang kedua adalah file kali.js
Ini adalah isi dari file kali.htm :

1
2
3
4
5
6
7
8
<html>
<head>
<script type="text/javascript" src="kali.js"></script>
<title>Perkalian</title>
</head>
<body onload='kali();'>
</body>
</html>

Selanjutnya kita akan membuat file javascript nya:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
function kali()
{
	var i,j;
	document.write("<table bgcolor=\"black\">");
	for(i=0;i<11;i++)
	{
		for(j=0;j<11;j++)
		{
			if(i==0 && j==0)
				kiriAtas();
			else if(i==10 && j==10)
				kananBawah(i,j);
			else if(i==0 && j==10)
				kananAtas(j);
			else if(i==10 && j==0)
				kiriBawah(i);
			else if(i==0 && j!=0 && j!=10)
				barNol(j);
			else if(i!=0 && i!=10 && j==0)
				kolNol(i);
			else if(i!=0 && i!=10 && j==10)
				kolSepuluh(i,j);
			else
				itung(i,j);
		}
	}
	document.write("</table>");
}
 
function kiriAtas()
{
	document.write("<tr bgcolor=\"white\"><td width=\"30\"><center>X</td>");
}
function kananBawah(i,j)
{
	document.write("<td>"+(i*j)+"</td></tr>");
}
function kananAtas(j)
{
	document.write("<td><center>"+j+"</td></tr>");
}
function kiriBawah(i)
{
	document.write("<tr bgcolor=\"white\"><td><center>"+i+"</td>");
}
function barNol(j)
{
	document.write("<td width=\"30\"><center>"+j+"</td>");
}
function kolNol(i)
{
	document.write("<tr bgcolor=\"white\"><td><center>"+i+"</td>");
}
function kolSepuluh(i,j)
{
	document.write("<td width=\"30\"><center>"+(i*j)+"</td></tr>");
}
function itung(i,j)
{
	document.write("<td><center>"+(i*j)+"</td>");
}

Dalam tabel perkalian, kita bisa membagi bagian tabel menjadi beberapa bagian, yaitu sudut kanan atas, sudut kanan bawah, sudut kiri atas, sudut kiri bawah, baris ke 1, baris ke 10, kolom ke 10.
Kenapa kita harus melakukan pembagian ini?
Karena tiap tempat akan memiliki akhiran script yang berbeda, misalnya pada kolom awal, kita harus memulianya dengan tr dan pada kolom terakhir kita harus mengakhiri tr ini.