Filter Baris pada Table dengan jQuery

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();
	});
}

2 thoughts on “Filter Baris pada Table dengan jQuery

Leave a Reply

Your email address will not be published. Required fields are marked *