Membuat Filter table dengan kolom Search

Halo semua, balik lagi nih di Cermi Yoke. Kali ini Yoke mau membahas tentang filter table menggunakan kolom search. Ini sangat berguna bagi user jika ingin memfilter sesuatu di dalam sebuah table. Bayangkan jika data yang ada begitu banyak, tidak mungkin user mencari data dari table itu satu per satu. Oke kita langsung saja ke TKP.

1.Install Jquery

Langkah pertama yaitu download atau install Jquery, bisa langsung ke web ini untuk prosesnya KLIK.

2. Buat Table

Buat sebuah table sederhana seperti berikut

Pastikan table diberi id agar dapat dikenali oleh perintah JS nantinya

3. Buat Input Search diatas table tadi

Buat sebuah kolom Search dengan perintah html input seperti code berikut ini :

<input type=”text” id=”myInput” onkeyup=”myFunction()” placeholder=”Search for names..” title=”Type in a name”>

Seperti table tadi, diberikan sebuah id agar dapat dikenali

4. Sisipkan perintah Javascript

Dengan menggunakan Tag <script> untuk menyisipkan perintah JS pada source code kita, boleh diawal/bagian head source code kita atau dibagian akhir. Perintah ini yang akan mengeksekusi apapun yang kita input didalam kolom search

Dan hasilnya pun akan seperti ini :

Sekarang kita bisa memfilter nama dengan menginput melalui kolom search. Happy Coders !

139 Total Views 1 Views Today
Views All Time
Views All Time
133
Views Today
Views Today
1

Article written by

This is your Bio

6 Responses

  1. Thanks for sharing Yoke, menambah ilmu pengetahuan baru bagi yang masih belajar kodingan nih ^^
    Semoga dilancarkan kedepannya dan progress VIKA semakin better lagi ^^
    Semangat Yoke ^^

  2. Thanks for sharing Yoke, dapet ilmu baru dari Yoke dengan adanya Filter ini dapat mempermudah untuk mendata mahasiswa itu. Semoga kedepannya VIKA dapat dikembangkan denagn lancar tidak ada hambatan 😀
    Semangat Yoke 🙂

Leave a Reply

You must be logged in to post a comment.