Minggu, 24 Desember 2017

Codeigniter - Datatables Server-side Processing

Assalamualaikum Warahmatullahi Wabarakatuh

Semoga kita masih diberi Allah kesempatan untuk istiqomah beribadah dan ngoding 😄
Saya ingin berbagi tutorial penggunaan datatable server side processing di Codeigniter, mungkin ada dari temen-temen sekalian yang sudah pernah pakai atau membuatnya....
Oke dimulai dulu apa itu Datatable Server-side Processing? bisa dicek disini
  1. Buat table di MySQL atau MariaDB, table tersebut digunakan untuk menyimpan data. ex : user
  2. Persiapkan Codeigniter (setting juga koneksi ke database nya dan base url nya)
  3. Persiapkan asset-asset yang diperlukan untuk datatable //code.jquery.com/jquery-1.12.4.js , https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js , https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css
  4. Download Library Datatable github Library Datatable karya om Vincent Bambico <metal.conspiracy@gmail.com>
  5. Pasang library tersebut di folder application\libraries
  6. Masuk ke Controller dan ketikkan kode pada __construct seperti ini
    $this->load->library('datatables');
    
    Buat Methode dengan nama datatable dan masukkan kode :
    public function datatable(){
      $builder = $this->datatables
      ->select('a.user_id as id, a.user_name as name, a.user_guid as guid, a.user_email as description, a.sys_soft_deleted as deleted')
      ->select(", IF(a.user_nonactivated = 0, 'iya', 'tidak') as nonactivated")
      ->select(", b.groups_name as group")
      ->from('user as a')
      ->join('groups as b', 'a.user_groups_id = b.groups_id');
      $builder->add_column('edit', 'Edit', 'guid')
      ->add_column('soft', 'Hapus', 'guid')
      ->add_column('restore', 'Purge/Restore', 'guid');
      $this->output->set_content_type('application/json')->set_output($this->datatables->generate('json'));
     }
  7. Masuk ke View HTML dan ketikkan kode seperti ini
    < table class="table table-bordered" id="dt-table" width="100%" cellspacing="0"> < thead > < tr > < th>Nama< /th> < th>Email< /th> < th>Group< /th> < th>Aktif< /th> < th>Aksi< /th> < /tr> < /thead > < /table >
  8. Masuk ke View Javascript dan ketikkan kode seperti ini
  9. Jalankan  Programmnya
Semoga bermanfaat, jika ada yang ditanyakan silahkan komentari postingan saya ini.. Sekian 



Wassalamualaikum Warahmatullahi Wabarakatuh