Membuat Data Table Dengan Bootstrap 4

DataTable Bootstrap 4

Membuat Data Table Dengan Bootstrap 4 | Salah satu fitur yang wajib di sediakan sebuah aplikasi tidak hanya menampilkan data begitu saja, namun harus di pertimbangkan juga bagaimana cara menemukan salah satu data yang di kehendaki, jika data yang tersimpan masih sedikit akan sangat mudah menemukannya, namun bagaimana jika data yang kita input ke dalam database sudah mencapai ratusan bahkan ribuan, tentu akan sangat merepotkan jika harus membaca dan mencari satu persatu.. Bagai mencari jarum dalam tumpukan jerami..

Nah.. kali ini kita akan berkenalan dengan DataTable, Fitur ini sangat sesuai dengan kasus di atas, karna meski sebanyak apapun data yang ada ketika kita mengetikkan kata "mozilla" maka seluruh data yang tidak mengandung kata "mozilla" akan di hilangkan..

Fitur Pencarian Data

Menarik bukan.. pembuatan nya juga sangat sederhana, karena plugin yang tersedia sudah lengkap.. silahkan baca dokumentasi langsung dari website resminya di https://datatables.net/..

Langsung saja kita akan Membuat Data Table Dengan Bootstrap 4..

Pertama download dulu berkas style nya yang terdiri dari jquery,css bootstrap dan plugin2 DataTables, sudah saya sediakan semua nya Disini.

Setelah di download silahkan extrak dan posisikan file seperti ini..

Sturktur file

Karena dalam contoh ini kita tidak menggunakan data dari database, maka cukup satu file saja yang akan kita buat, yakni file index.php berikut scriptnya..

Simpan dan jalankan di browser..