Membuat lookup tabel javascript

Membuat lookup tabel javascript

1208
0
SHARE
Halo teman, setelah agak lama vakum gara-gara banyak project akhirnya saya sempatkan menulis kembali. Kali ini saya menulis tentang lookup tabel java script.

Apa itu lookup table javascript ?

ehmm..jadi misalnya kita membuat suatu form, kemudian salah satu inputan form tersebut harus diambil dari database, maka kita bisa menggunakan lookup tabel ini.

DEMO | DOWNLOAD

Mengapa tidak menggunakan input select aja?
Kalo database kita tidak begitu besar, kita dapat menggunakan input select. Kalo data kita sudah mencapai puluhan ribu atau ratusan ribu tentu akan sangat merepotkan bila menggunakan input select, meskipun kita menggunakan input select ajax.
Dengan menggunakan lookup ini data yang ditampilkan sebelum dipilih juga bisa banyak, misalnya data alamat, tempat tanggal lahir dll. Sehingga kita tidak akan salah mengambil data pegawai yang memiliki nama yang sama persis karena kita masih bisa melihat alamat atau tempat tanggal lahir yang berbeda. Hal ini agak merepotkan bila dilakukan dengan input select (meskipun bisa juga, hehehe).
Tujuan kita yaitu membuat form, dimana pada form tersebut ada tombol yang digunakan untuk menampilkan table lookup. Saat kita memilih salah satu data dari lookup tersebut, data yang terpilih akan ditampilkan pada form input.

Cara membuat lookup tabel javascript

Ok, langsung saja kita mulai membuat lookup tabel javascript. Kita membutuhkan 2 file untuk membuatnya. Pertama kita butuh form.php untuk form inputan kita dan form lookup.php untuk menampilkan data lookup.
Step 1 : buatlah form.php kemudian masukkan kode berikut ini

Step 2 : buatlah file lookup.php kemudian masukkan kode berikut ini

Step 3 : jalankan file form.php pada browser, kemudian klik tombol “…”, maka akan tampil jendela dengan tabel lookup. Klik salah satu baris pada tabel lookup tersebut, maka nilai yang anda pilih akan masuk ke dalam form. Anda telah berhasil membuat lookup tabel.

lookup

DEMO | DOWNLOAD

Penjelasan

form.php
yang menjadi perhatian pada form.php adalah  onclick=”open_child(‘lookup.php’,’Look Up’,’800′,’500′)”. Disini saat kita klik tombol tersebut maka akan ditampilkan window baru yang halamannya diload dari lookup.php. Selain itu <input id=”kota” type=”text” name=”kota” /> terdapat id=”kota” yang akan digunakan sebagai tujuan saat data lookup terpilih.
lookup.php
yang dilakukan file ini adalah menampilkan tabel (yang dalam prakteknya anda dapat mengambilnya dari database). Saat kita klik pada salah satu barisnya maka akan menjalankan perintah pilih(). pada fungsi pilih() tersebut akan diambil isi kolom pertama pada baris terpilih, kemudian mengubah nilai inputan dengan id=”kota”, menjadi nilai yang telah kita ambil tadi. selanjutnya akan menutup jendela lookup.php. Pada praktek yang sebenarnya anda harus menambahkan form pencarian serta paging pada halaman lookup.php sehingga anda tidak akan kesulitan dalam mencari data. anda dapat mencari menggunakan form pencarian kemudian memilih baris yang dikehendaki maka nilai pada baris tersebut akan masuk ke form.php.

Pengembangan

kode diatas dapat anda kembangkan misalnya untuk lookup.php anda menggunakan pencarian dan paging menggunakan ajax. anda juga dapat menampilkan lookup.php dalam sebuah modal, bukan pada jendela baru sehingga tampilan halaman anda akan lebih menarik. Selamat mencoba. Jangan lupa komen dan likenya ya. hehe
Bagikan artikel ini ya.. terima kasih

NO COMMENTS

LEAVE A REPLY