Datatable adalah salah satu plugin berbasis javascript yang digunakan untuk menampilkan data dalam bentuk grid, selain menampilkan data, library ini jukan akan menampilkan fitur lain yang sering digunakan seperti pencarian data, sorting data dan paging untuk menampilkan data dengan jumlah tertentu pada setiap halaman. Terdapat 2 metode supply data dari database ke datatable, yaitu metod client side dan metode server side. Berikut ini perbedaan diantara keduanya.

Metode Client Side:

  • Semua data akan dimuat terlebih dahulu oleh browser, setelah semua data dimuat, barulah dipisahkan per page (pagination)
  • Sangat cocok digunakan untuk data dengan jumlah yang kecil
  • Dari sisi konfigurasi request data sangat mudah dilakukan

Metode Server Side:

  • Web browser tidak melakukan proses loading data secara keseluruhan, namun web browser hanya melakukan load data pada page yang sedang aktif, dengan begitu, beban web browser akan lebih ringan dan aplikasi lebih nyaman untuk digunakan. Penjelasan riilnya seperti ini, jika dalam satu query menghasilkan data sebanyak 20.000 data, dan jumlah data per page datatable hanya sebanyak 10 data, maka secara default data hanya akan diambil 10 data pada page 1, 10 data pada page 2, dan seterusnya.
  • Cocok digunakan untuk data dengan jumlah yang besar
  • Dari sisi konfigurasi request sedikit lebih rumit, namun sebanding dengan permormanya, berapapun jumlah data Anda, datatable akan terasa nyaman saat digunakan

Tutotial ini ditulis di atas platform framework CodeIgniter, dan langsung pada file intinya (MVC).

Struktur table

Controller/Karyawan.php

Model/M_karyawan.php

Script model di bawah ini sudah mampu untuk melakukan join tabel, akan tetapi join tabelnya masih terbatas 3 tabel saja, jika menginginkan lebih banyak tabel yang terlibat join, maka tambahkan sesuaikan saja konfigurasinya.

View/karyawan.php

Hal pertama yang mesti dilakukan adalah melakukan insert data ke tabel karyawan dengan menjalankan fungsi insertdatakaryawan(), misalnya dengan mengakses ke alamat:

http://localhost/karyawan/insertdatakaryawan

Sebagai catatan, untuk mengeksekusi data sekian banyak membutuhkan waktu yang tidak sebentar, dan biasanya akan terbentur pada konfigurasi max_execution_time di php.ini, sehingga ubahlah konfigurasi file php.ini menjadi seperti di bawah ini

Kemudian restart service Apache.

Hasil