Membuat Live Edit Table Dengan Ajax dan Bootstrap

Live Edit Table Versi PHP Suka Suka

Menampilkan data pada tabel bootstrap memang sudah membuat tampilan menjadi rapi dan menarik untuk dilihat, sehingga tidak membosankan untuk melihat data yang ada pada tabel.

Namun, bagaimana dengan form tambah data dan edit data yang biasanya selalu sama jika menggunakan bootstrap, terlihat membosankan memang dengan tampilan form yang begitu-begitu saja.

Tertarik untuk mengubah gaya tampilan form input dan edit data, saya mencoba membuat form input edit berada didalam tabel yang bisa dibilang dengan Live Edit Table.

Ya, kenapa live edit table. Karna dalam melakukan input dan edit data kita tidak membuka banyak halaman, karna semuanya berada didalam tabel yang dimana digabung dengan data yang ada.

Terkesan bercampur aduk dengan data, tetapi dengan teknik ajax jquery, semuanya dapat disembunyikan sehingga bisa menampilkan tampilan yang tetap menarik untuk dilihat ditambah dengan efek-efek animation yang diberikan oleh jquery.

Tertarik untuk mencobanya, berikut logika Live Edit Table, versi php suka suka :

• Mengambil data dari database dan ditampilkan ke tabel bootstrap seperti membuat tabel biasa, jika yang belum paham membuat tabel silahkan pahami dulu cara membuat tabel biasa.

• Selanjutnya menambahkan kedalam satu kolom sebuah form input yang telah di hidden menggunakan css, sehingga tidak terlihat ketika data reload pertama kali.

• Lalu memberikan class dan id pada setiap elemen yang akan kita eksekusi nantinya, seperti span, a href dan input. Tujuannya adalah agar dapat melakukan edit hanya pada satu data berdasarkan id data.

• Lalu menambahkan tombol tambah data, edit data dan delete data sebagai opsi yang akan kita pilih sesuai fungsinya. Tidak lupa menambahkan class dan id nya agar dapat berfungsi pada satu data.

• Setelah semua tampilan selesai, selanjutnya menjalankan setiap fungsinya dengan ajax. Didalam script nanti akan terdapat tiga javascript yang penting yaitu bagian tambah, edit dan delete.

• Ajax tambah data berfungsi menambahkan data berisikan null kedalam database yang artinya hanya menambahkan data id sedangkan data lainnya kosong. Data yang tampil di database juga data kosong. Untuk mengisi datanya adalah dengan menggunakan tombol edit.

• Ajax edit data berfungsi untuk melakukan editing data yang ditabel dengan proses menyembunyikan text data ditable dan menampilkan form yang telah berisikan value sesuai dengan text yang disembunyikan. Proses ini juga merubah tombol edit menjadi update yang berfungsi update data jika ada perubahan data. Untuk membatalkan proses edit saya mencoba menambahkan script onMouseUp yang jika diklik dimana saja maka table akan kembali normal.

• Ajax delete berfungsi untuk menghapus data yang prosesnya sangat simple, dimana ketika tombol delete di klik maka akan keluar box konfirmasi hapus dan jika hapus terpilih maka data akan terhapus.

Jika anda sudah memahami logika di atas, waktunya menterjamahkannya ke dalam script. Bagian ini dinamakan pengkodingan yang sebenarnya anda pasti sudah mengerti.

Step awal tentunya mempersiapkan database sebagai tempat penyimpanan data.


File koneksi sebagai jembatan antara php dan mysql.

Tabel yang akan menampilkan data dari database, lengkap dengan opsi CRUD dan juga form input. Dilengkapi juga dengan script notifikasi atau alert dan css.


Tiga script ajax yang masing-masing berfungsi sebagai add, edit dan delete data.


Terakhir script table yang berfungsi untuk mereload data saat fungsi opsi sukses di jalankan.


Script diatas di bangun sesimple mungkin agar dapat mudah dimengerti dan dipahami. Bagi yang mengalami kendala dengan script di atas silahkan tanya langsung kepada admin melalui kontak dibawah halaman ini. Admin akan berusaha memberikan solusi yang terbaik untuk belajar semakin maju.

Postingan ini juga dilengkapi dengan video demo hasil akhir program yang dibangun.