Membuat Datatables Client-Side di Codeigniter

Catatan ini hanya untuk pengingat saya aja sih, biar ngk lupa dan punya arsipnya dikemudian hari 😄

Pada dasarnya, datatables merupakan salah satu plugin Jquery yang digunakan dalam penampilan data dalam bentuk Grid dalam suatu tabel, yang biasanya memiliki beberapa fungsi tambahan seperti Sorting Data, Pencarian Data, dan Paging atau paginasi dengan menjadikannya beberapa halaman
Contohnya seperti ini :

Datatables sendiri terbagi menjadi 2 jenis,

1. Datatables Client-Side
2. Datatables Server-Side

Dicatatan ini, kita akan praktek membuat Datatables Client-Side dulu, yg Server-Side di postingan berikutnya yaaa... 😄, biar kalian rajin" baca artikel di blog ini 😄

Semua file sudah saya sediakan, kalian donlot dulu aja 

1. Codeigniter v3.1.7 di sini
2. Bootstrap, JQuery, Datatables di sini 
3. Database agen travel, di sini

Silahkan kalian ekstrak file Codeigniter nya lalu buka kode editor kalian, di sini saya pakai Sublime Text

Tempatkan file Bootstrap, JQuery, Datatables di folder template, bisa kalian kasih nama assets atau apalah pokoknya buat nampung 3 plugin tersebut

Jangan lupa, atur file pada folder application -> config -> autoload.php, config.php, database.php.
Setelah itu, langsung kita setting satu persatu pada bagian Controller, Model, dan View

1. Controller



• Kita load file model nya terlebih dahulu, $this->load->model('Mwelcome'), kalian sesuaikan saja nama nya
• Pada function index(), kita ambil data dari model Mwelcome dengan function tampil() yang nantinya ditampilkan pada file tampil.php pada folder View
2. Model

• Kita ambil data menggunakan query builder yg sudah disediakan oleh Codeigniter, sesuaikan dengan nama tabel nya, disitu nama tabel nya adalah agen
3. View

• Load file CSS Bootstrap dan Datatables nya,
• Lalu Load juga file JS JQuery, Bootstrap dan Datatables nya
  
• Setelah itu langsung aja kita buat tampilan tabel nya dulu
  
• Langkah terakhir kita setup Datatables nya seperti berikut ini, 
  
• Di dalam $("#tabel_agen").DataTable(); itu menunjukkan id tabel yang akan diproses oleh plugin Datatables, silahkan sesuaikan dengan nama id tabel yang kalian buat sendiri  
• Kalau sudah, bisa coba jalankan dengan mengetikkan localhost/travel di browser, harusnya kalau berhasil akan seperti berikut ini :
  

Taraaaaaa, Datatables kalian sudah berjalan dengan lancarrr 😀, sebagai catatan saja untuk pengguna OS Linux, jangan lupa untuk memberi hak akses untuk file" Bootstrap, JQuery serta Datatables tadi supaya bisa berjalan dengan mulus tanpa adanya error di console browser

Sebagai catatan, model Client-Side ini hanya cocok digunakan untuk data yang kurang dari 1.000 record baris / row yang ditampilkan, apabila data kalian sudah lebih dari 1.000 record baris / row, saya sarankan menggunakan model Server-Side yang proses load data nya sangat cepat ketimbang menggunakan Client-Side 

Ditunggu komentarnya yaa, sambil saya nyiapin tutorial Datatables Server-Side

Terima kasih ... ☺