Cara Mengunakan Datatables pada Codeigniter 3

Pada tutorial php sebelumnya kita sudah belajar menggunakan datatables baik yang simple (zero configuration) maupun datatables Server-Side untuk menangani load data dengan jumlah yang banyak.. dan pada tutorial kali ini kita akan menerapkan atau mengimplementasikan penggunaan datatables pada codeigniter 3.

Kenapa kita menggunakan Codeigniter, karena CI atau Codeigniter merupakan Framework yang cukup familiar dan banyak penggunanya, baik untuk pemula maupun sudah jago koding selain itu banyak support library atau plugin yang membuat CI menjadi salah satu Framework pilihan para web developer.

Sebelum kita lanjut pada tutorial menggunakan datatables pada CI, pastikan kalian sudah menyesuaikan peralatan yang akan kita gunakan.

  1. XAMPP Version: 5.6.3 atau terbaru
  2. Codeigniter 3 ke atas
  3. Datatables Versi 1.10.10 di http://datatables.net/download/packages
  4. Bootstrap 3 di http://getbootstrap.com/getting-started/#download

Lakukan Instalasi Codeigniter kalian pada htdocs..dan untuk berjaga-jaga ada baiknya kalian membaca Tips Menggunakan Codeigniter untuk menghindari terjadinya error saat di online-kan meskipun saat di localhost berjalan dengan normal.

Persiapan Impelementasi Datatables pada Codeigniter 3

Setelah kita melakukan instalasi Codeigniter 3 pada folder htdoc, selanjutanya buatlah sebuah folder dengan nama “assets” yang letaknya sejajar dengan folder application kemudian letakkan hasil ekstak file bootstrap yang sudah kita unduh ke folder assets.

Kemudian cari folder media dari hasil ekstrak dari datatables yang sudah kita unduh sebelumnya. Kurang lebih akan tampak seperti berikut isi dari folder assets :

Implementasi Datatables pada Codeigniter 3

Pertama : Buatalah database dengan nama “datatables_ci” kemudian import kan file sql yang berada disini.

Cara meng-importkannya dengan meng-copy lalu paste-kan pada SQL phpmyadmin seperti pada tutorial sebelumnya cara menggunakan datatables.

Lalu jangan lupa lakukan setting pada file database.php dan sesuaikan dengan nama database yang sudah kita buat yang kurang lebih seperti berikut:

Kedua : buatlah sebuah file dengan nama “M_Karyawan.php” pada models dan isi dengan kode berikut:

Kode diatas adalah kode yang bertugas menangkap perintah dari AJAX datatables dan membuat data JSON yang diperlukan dalam membuat tables.

Ketiga : buatlah file baru di controller dengan nama “Karyawan.php” dan isi dengan kode berikut :

Perhatikan method datatables_ajax()

Merupakan method yang menerima parameter-parameter yang dikirimkan oleh datatables. Karena datatables menggunakan AJAX maka kita lakukan handle ajax untuk menghindari akses langusng pada method melalui URL.

Langkah selajutnya adalah memanggil model M_Karyawan.php untuk berinteraksi dengan database.

Oh iya di sini kita menggunakan Method POST pada AJAX datatables konfigurasi dapat dilihat pada view_karyawan.php dibawah…

Keempat : buatlah file baru di folder views dengan nama “view_karyawan.php” dan isikan kode berikut :

Perhatikan tag komentar No. 1. Merupakan fungsi jquery yang bertugas untuk mengubah kolom paling bawah (<th>First name</th> dan seterusnya) menjadi sebuah kolom input untuk pencarian perkolom datatables.

Pada tag komentar No. 2 . Merupakan fungsi untuk mengekseskusi dan memanipulasi table. Dan pada property “ajax” kita bisa lihat bahwa untuk URL kita arahkan ke method datatables_ajax(), dan pada type pengiriman kita gunakan method POST.

Untuk tag komentar No. 3 adalah script untuk mengeksekusi pencarian perkolom.

Kelima : untuk mengakses bisa kalian gunakan http://localhost/datatables-ci/index.php/karyawan. dan jika kalian sudah menghilangkan index.php pada url maka gunakan http://localhost/datatables-ci/karyawan.

Untuk setting yang lain bisa kalian baca di tips menggunakan codeigniter 3..

Seluruh script diatas dapat kalian unduh disini..

Demikian tutorial cara mengunakan datatables pada Codeigniter 3Perlu diketahui bahwa script diatas masih sangat sederhana sehingga ada kemungkinan tidak bisa diterapkan pada kasus tertentu seperti join table yang memiliki nama field yang sama.

Sekian dan selamat belajar…

Menangani Jumlah Data yang Besar pada datatables
Membuat Form login dengan bootstrap dan PHP

  • Faddli Lindra Wibowo

    Gan untuk join tabel gimana ya ?

    • Untuk table join agan cukup mengikuti rule join yang sudah disediakan oleh Codeigniter 3

    • Faddli Lindra Wibowo

      /**
      * Query Data
      */
      $this->db->select(implode(‘,’, $column));
      $this->db->from($table);
      $this->db->join(‘jabatan’, ‘jabatan.id = karyawan.id’);

      Mohon koreksinya gan 🙂

    • Hemm mungkin akan lebih praktis ketika agan coba dulu membuat query di halaman yang lain untuk menguji query join nya. Jika sudah work tinggal pindah ke script yang sekarang

  • Ade K Setiadi

    Mas untuk menambahkan aksi (edit & delete) bagaimana ya?

    • Mas Ade bisa mengubah atau menambahkan row table di bagain view.

      untuk mengubah mas Ade bisa mengubah misalkan tanggal menjadi edit/delete

      foreach($query->result() as $row) {
      $options[‘data’][] = array(
      $row->first_name,
      $row->last_name,
      $row->position,
      $row->office,
      id_karyawan.’/>edit | id_karyawan.’/>delete
      );
      }

      atau menambahkan. Mas Ade bisa menambahkan setelah tanggal action pada view tambah tombol edit / delete seperti berikut, setelah tanggal

      foreach($query->result() as $row) {
      $options[‘data’][] = array(
      $row->first_name,
      $row->last_name,
      $row->position,
      $row->office,
      $row->start_date,
      id_karyawan.’/>edit | id_karyawan.’/>delete
      );
      }

    • Ade K Setiadi

      invalid json respone, mas..
      viewnya sudah saya rubah..

      First name
      Last name
      Position
      Office
      Action

      First name
      Last name
      Position
      Office
      Action

      //=====Model===

      foreach($query->result() as $row) {
      $options[‘data’][] = array(
      $row->first_name,
      $row->last_name,
      $row->position,
      $row->office,
      anchor(‘M_Karyawan/edit/’.$row->id_karyawan,’edit’)
      );
      }

    • Maaf Mas ternyata ada kesalahan dalam kode, akan saya benahi dulu 😀

    • doyox2

      mas kok datanya jadi tampil double ya?
      gara2 pake:
      $option[‘data’][] = array(
      $row->kd_therapist,
      $row->nama_jabatan,
      $row->nama,
      $row->alamat,
      $row->nohp,
      $row->tanggal_masuk
      );

  • Maulana Rahman

    Kalo mau export semua record ke pdf gimana ya? saya sudah coba export, tp yang kebawa cuma record yang terlihat saja. Terima kasih atas jawabannnyaa (y)

    • Untuk Melakukan Ekspor data ke pdf agan bisa membuat method baru misalkan function cetak_pdf() baru yang khusus untuk mencetak semua record pada class Karyawan di Controller dan tidak menggunakan method untuk menampilkan record pada datatables

  • Robi

    Mas, Saya coba kenapa tidak muncul tabelnya ya? hanya tulisannya saja. Table sama sekali gak muncul.

  • doyox2

    gimana gabungin pake x-editable mas?

    • Maaf gan belum ada tutorial tersebut di onphpid.com mungkin next time 🙂

  • doyox2

    maaf gan, gimana cara pake nomor ? ngikutin yang di https://datatables.net/examples/api/counter_columns.html, gbisa gan pas halaman 2 , nonya gak muncul

  • Khairul Fajeri

    kalau gak pakai join gimana gan, aku gak bisa.

  • kalau query mysqlnya komplek gimana gan? misal query yang saya punya:
    ***
    SELECT Kunjungan.Tanggal, Kunjungan.ID, Kunjungan.IDMR, Keluarga.Nama, Keluarga.Sex, Keluarga.Tgl_lahir, Keluarga.Pekerjaan, Keluarga.No Kartu, If(TIMESTAMPDIFF(day,Tgl_lahir,tanggal)31 And TIMESTAMPDIFF(month,tgl_lahir,tanggal)<12,TIMESTAMPDIFF(month,Tgl_lahir,tanggal),TIMESTAMPDIFF(year,Tgl_lahir,tanggal))) AS umur,if( TIMESTAMPDIFF(day,Tgl_lahir,tanggal)31 And TIMESTAMPDIFF(month,tgl_lahir,tanggal)<12,'Bln','Thn')) AS Kategori, Keluarga.Asuransi, Keluarga.rt, Keluarga.Kelurahan, Keluarga.MR, Keluarga.No Telp, Keluarga.Ketjaminan, Keluarga.Jalan, Keluarga.Kartuberobat, Keluarga.NewMR FROM Keluarga INNER JOIN Kunjungan ON Keluarga.ID = Kunjungan.IDMR
    ***
    kendalanya ada di nama kolom yang mengandung spasi dan beberapa kolom yang dihasilkan dari logika waktu

    • Oki Erie Rinaldi

      spasi dalam nama kolom adalah bom waktu

      lebih baik ganti saja nama kolomnya, hilangkan spasinya

    • Saran saya replace saja nama kolom-kolomnya biar lebih mudah, karena penggunaan space, penamaan kolom mirip Syntax SQL itu tidak rekomendasikan.

  • Oki Erie Rinaldi

    Kirain di CI-nya pake library datatable juga.
    tadinya mau tanya gini:
    Bagaimana cara limit hasil menggunakan library datatable?
    Soalnya $this->datatables->limit() tidak berfungsi/ tidak dikenal. Fungsi-fungsi dalam library ini kan sebenarnya override fungsi bawaan CI, tapi ga semuanya.
    Mungkin di sini ada yang mau bantu

  • Wahyu Artadianto

    kalau tanpa data record bisa ngga?
    jadi pake
    $stsql = ” query command sql “;
    $query = this->db-query($stsql);