Membuat Datatables Server-Side di Codeigniter dengan Library Ignited Datatables

Seri catatan ini merupakan lanjutan dari tutorial Datatables sebelumnya, pada seri ini saya akan menuliskan gimana sih cara pembuatan Datatables versi Server-Side
Contohnya seperti ini :

Dicatatan ini, kita akan praktek membuat Datatables Server-Side, jika kalian pengen buat versi Client-Side, silahkan klik link berikut ini.

Oh ya, kapan sih kita menggunakan model Server-Side dan Client-Side??

Jawabannya yaitu saat data yang akan kita tampilkan dr database itu lebih dr 1.000 record / baris (relatif sih). Intinya, saat kalian nampilin data dalam jumlah banyak dan proses load di browser sudah sampai berdetik-detik lamanya buat load data nya, itulah saat yg tepat kalian menggunakan model Server-Side, karena model Server-Side itu sat set sat set dalam penampilan datanya ngk kyk Client-Side yg klemar klemer klw datanya ribuan record😂

Langsung aja ya,..

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
4. Library Ignited Datatables, disini (Versi di github nya ada bug, kalian pakai yg sy kasihkan aja)

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.

Lalu tempatkan juga file Datatables.php ke dalam folder libraries,

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
• Lalu load library Datatables tadi, samakan saja tulisannya
• Pada sesi Client-Side sebelumnya, kita melakukan load data dari model Mwelcome di  function index(), sedangkan untuk model Server-Side, sedikit sy buat berbeda biar kalian bisa faham alur pembuatan Datatables Server-Side.
• Lalu kita buat function baru untuk load data secara ajax, yang digunakan sebagai media atau perantara load data secara Asynchronous (Komunikasi secara tidak langsung)
  
• Query builder pada library Datatables hampir sama dengan yang disediakan oleh Codeigniter,
• Tuliskan secara manual nama-nama kolom yg akan ditampilkan, jika tidak, akan berimbas kepada fitur pencarian Datatables yang tidak dapat digunakan bahkan hasil record database bisa saja tidak keluar, bisa kalian coba sih 😂😂
• add_column berfungsi sebagai kolom custom kita, bisa kita tambahin tombol edit data, atau hapus data. bebas dahh, pokoknya jgn lupa, index pertama add_column seperti : 'checkbox' dan 'view' itu yg ditulis di bagian file pada folder View nanti.
2. Model
• Dikarenakan kita sudah membuat query datatables nya di Controller, maka kita tidak perlu membuat lagi di model, kalau mau dibuat di model dgn alasan sesuai prosedur dari Codeigniter jadinya begini 
  
• Nanti dibagian Controllernya tinggal dibuat spt ini aja  
  
3. View

• Load file CSS Bootstrap dan Datatables nya,
• Lalu Load juga file JS JQuery, Bootstrap dan Datatables nya
  
• Berbeda dengan Datatables Client-Side yang harus menuliskan <tbody>...</tbody>, model Server-Side hanya menuliskan <thead>...</thead> nya saja tanpa menuliskan <tbody>...</tbody> seperti di model Client-Side 
  
  
  
• Langkah terakhir kita setup Datatables nya seperti berikut ini, 
  
  
  
  
  
  
  
• var save_label gak usah ditulis, lupa mau ngapain itu 😂😂😂
• Dibagian ajax : url bisa ditulis menggunakan site_url atau base_url, fleksibel aja yg penting bisa nampil
• columns: nantinya berisi data yg akan ditampilkan sesuai dgn query builder yg kita tulis di Controller atau di Model
• Kalau kasusnya kolom custom checkbox kita di awal, maka kita atur pemanggilannya sebelum {"data": "id_agen"} dan {"data": "agen"}, dan kolom custom kita ("view") yg terakhir buat button edit dan button hapus kita letakkan setelah {"data":"id_agen"} dan {"data":"agen"} 
• Samakan semua syntaxnya ya, baik besar kecilnya. Biar aman dan lancar sentosa 😂😂
4. Langsung jalankan deh, di browser kalian  
   
5. Dan udah jadii, berikut sy kasih contoh custom an buat join tabel, pencarian data berdasarkan query like, tapi database nya yg tak buat contoh ini berbeda dgn yg sy tuliskan ditulisan ini tp yg penting intinya ajalah klw gk faham tinggal komentar aja .. 
6. Variasi 1
   
7. Variasi 2 
   

Dan selesaiiii, custom sendiri sesuai kebutuhan jika pingin model customan yg lainnya

Ditunggu komentarnya yaa, selamat ngoding ria. Oh ya mohon sarannya biar sy gk screenshot kode tp biar kayak situs" lain yg kode nya bisa di tempelin ke postingan itu gimana ya, biar yg pengen belajar jg mudah dalam copas" syntax nya, ditunggu sarannya yaa ...


Next tutorial mengirim email lewat CI..

Terima kasih ... ☺