Cara membuat datatable serverside pada Codeigniter dengan join table

Cara membuat datatable serverside pada Codeigniter dengan join table

3374
28
SHARE

Cara membuat datatable serverside pada Codeigniter. Saya tertarik membahasnya lagi karena banyak sekali pertanyaan masuk terkait penggunaan datatable. Datatable memang favorit kebanyakan progmrammer karena kita tidak perlu lagi memikirkan paginasi, sorting dan searcing.

Saya pernah membahas bagaimana cara membuat datatable serverside pada codeigniter di sini. Namun pada artikel tersebut, kita belum bisa menggunakan JOIN table. Nah, pada kesempatan ini kita akan membuatnya bisa JOIN table. Jadi kita akan membahas datatables serverside plus join table. Dengan cara ini kita tidak perlu khawatir meskipun data kita puluhan ribu sekalipun. Penasaran? yuk langsung kita buat.

Cara membuat datatable serverside pada Codeigniter dengan join table

Skenarionya, kita memiliki table kota dan negara. Kita akan joinkan kedua table tersebut dengan kode negara. Mana tablenya gan? tenang, nanti bisa di download semua kode termasuk databasenya di akhir artikel ini.

1. Pertama kita tempatkan dulu file ignited datatable dalam folder application/libraries. Anda bisa membaca tentang ignited datatables secara lengkap di sini.

2. Buat Controller World.php dengan kode sebagai berikut.

Ada method index() untuk menampilkan halaman world. dan method json() untuk menampilkan data json yang dbutuhkan datatables.

3. Buat Model World_model.php dengan kode sbb :

Didalamnya terdapat method json() yang menjalankan query. Perhatikan disana kita bisa menggunakan join table. inilah yang paling utama dari tutorial ini.

add_column untuk menambahkan kolom secara manual. ada $1 disana yang akan di ganti dengan kolom ID. sehingga nilai $1 akan berubah sesuai ID nya. hal ini untuk keperluan edit atau delete.

Hal penting lainnya, Anda HARUS mendefiniskan field pada select satu-persatu. Jika anda menggunakan *, maka pada bagian add column tidak ada jalan. Jika ada nama field yang sama, gunakan alias seperti contoh di atas.

3. Buat View world.php. dengan kode sbb :

Kita menginclude kan css dan js yang diperlukan. Lalu membuat table dengan id=”mytable”. table ini harus memiliki <thead>.

Pada baris 90 s.d 99, kita definisikan alamat untuk datanya, yaitu controller world dan method json. kita definisikan juga kolomnya satu persatu, sesuai dengan data yang kita ambil di model.

Pada baris 102 s.d 108 kita tambahkan nomor urut pada kolom pertama, sehingga tampilan lebih menarik.

Pada baris 75 s.d. 84 kita ubah event searching dari keyup menjadi enter. secara default pencarian akan langsung berjalan ketika kita mengetikkan kata kunci. untuk data yang besar ini akan membebani server, makanya kita ubah trigernya menjadi enter. jadi untuk pencarian, kita ketik katakuncinya baru kita enter.

Selesai. Coba untuk membuka controller world melalui browser. dan lihatlah hasilnya.

Anda bisa mendownload file lengkap beserta dengan databasenya di sini. Demonya ada di video di atas ya.

Mudah bukan? selamat mencoba. Jika ada pertanyaan, jangan ragu menuliskannya di kolom komentar ya. Terima kasih telah berkungjung ke harviacode.

28 COMMENTS

  1. Selamat siang gan,

    Mau nanya. Saya sudah menhikuti tutorial dari agan terkait menampilkan data yang berelasi dg tabel lain. Alhamdulillah berhasil agan. Tapi saya masih bingung untuk update data yg berelasi kang.

    Untuk edit datanya masih bingung gan klo ada tabel yg berelasi.
    Case yg saya alami, saya punya 2 tabel,
    1. Tabel User
    2. Tabel Role
    Kedua tabel itu direlasikan dg field id_role

    Saat menampilkan datanya sudah berhasil. Untuk edit yg masih bingung. Mohon arahan.

    Untuk edit user pada form id role saya ganti dg role dg komponen select dan option pada form

  2. Wow keren, pakai datatable lagi, juga ada word an excelnya.

    Oke punya pak hari yang buat ini generator…

    Otaknya encer punya.. hehe

  3. Min mau tanya,, saya sudah download dan mengganti beberapa settingan dasar spt pada file database.php, config, dan route pada CInya.. Tapi kemudian muncul error spt ini “DataTables warning: table id=mytable – Ajax error. For more information about this error, please see http://datatables.net/tn/7“,, maksudnya apa ya..?

  4. gan kalo method jsonnya gak kepanggil itu gimana yaa?
    di cek di console/di network gak ada yg error gan ..
    ane make third party semacam modules gitu gan , apa berbeda cara pemanggilan method jsonnya di url ajaxnya ??

  5. Pak, mau tanya, saya sudah implementasi di coding trail dah saya berhasil. pakai template file yang kemudian load view juga berhasil.

    Nah masalahnya sekarang saya lagi coba2 pake adminLTE, nah anehnya klo saya pakai system template yang kemudian di load view, ajaxnya nggak jalan. setelah saya teliti ajaxnya baru bisa jalan klo script ajaxnya diletakkan di luar view file tsb. misal saya letakkan di view footer.php, malah jalan tablenya muncul, tp klo script di letakkan di file yg sama tidak muncul, ini karena apa ya?

    • pastikan posisi js datatable di load setelah kita load jquery.js. dari keterangan mas Hakim, nampaknya file jquery berada di bawah (kemungkinan di footer bagian atas atau sebelum footer. makanya baru bisa bekerja setelah jquerynya ditaruh di footer. untuk lebih detail masalah javascript, silahkan gunakan consolenya mas. caranya tekan tombol f12 di browser mozilla, lalu refresh halaman dengan f5. maka pada tab console akan muncul keterangan jika ada error.

    • kasusnya sama kaya saya, kalau disaya solusinya adalah jquery diletakan di head tidak di footer, pasti jalan. Dan ini bukan hanya template adminlte tapi semua template, saya coba diniceadmin dan sbadmin

    • dari library ignited datatable. silahkan download file contoh yang sudah saya sediakan mbak. sudah lengkap kodenya disana.

  6. Jika CSRF Protection aktif, bagaimana settingannya mas ? soalnya kalau CSRF = TRUE, mesti error di POST, kalau CSRF = FALSE Normal

    • Ya mas admin, saya jg lgi caranya gk dpt. Bimana solusinya gan?
      Error json not found jika csrf protection aktif.
      Mohon pencerahan gan.
      Sekalian gmn cr nge-post scrf id insert/update/delete?
      Trimakasih gan

  7. Saya memiliki file html dan php seperti ini :
    = 3){ if($r->data_active == ”){ ?><a href="kitchen/master_data/Voucher/Delete/voucher_no); ?>” class=”btn danger btn-xs red” onClick=”return confirm(‘Are you sure delete this data?’)”>

    Untuk menambahkan kode PHP dalam add_column bagaimana ya?
    $this->datatables->add_column(‘view’, ‘edit | delete‘, ‘ID’)

    biar bisa di implementasiin ke dalam server side nya ? krn saya insert tag php, ataupun tanpa tag php ttp error

  8. min gimana caranya biar data yg di get dari query dilimit berdasarkan limit dari DataTable nya ?
    ini udah berhasil, tapi data yg diambil dari database malah semuanya, sedang total data di database saya sampe 5rb, jadinya lemot + berat ke server.

  9. Sore gan, kalau dalam 1 kolom terdapat 2 value, cara menampilkannya bagaimana gan ?
    misal ada kolom user didalamnya terdapat nama user ( jabatan ).

  10. kalau untuk menampilkan lebih dari 1 data dalam 1 kolom bagaimana mas ?
    misal kolom user isinya nama_user ( jabatan ).
    dan
    bagaimana cara menampilkan data menggunakan server side yang mempunyai parent ID lebih dari 1 ? misal ada kolom kategori dan detail isi kategori seperti dibawah :
    ID | kategori | detail
    1 | lauk | – ayam goreng
    | – ayam bakar
    | – ikan goreng
    ——————————
    2 | sayur | – bayam
    | – kangkung

    terima kasih mas.

  11. gmn cara encript dan descript json diatas mas?
    ane dah coba encript dibagian json => ‘world/edit/$1’ => ‘world/edit/’.encripsi(‘$1’)
    url sdh mau terencripsi tp pada saat diklik descriptnya tdk jalan keterangan record not found.

    mohon pencerahan gan, dimana ane tambahkan ecnrypt dan descrypt? di controller ataukah di model??
    thx gan

LEAVE A REPLY