Tutorial DataTable Server-Side Codeigniter 3

DataTable merupakan sebuah plugin library table, untuk menampilkan database dalam tampilan bentuk table. Tentu bagi yang suka coding pasti tau tentang DataTable ini.

DataTable Server-Side CodeIgniter 3

Disini saya akan memberi kan tutorial tentang DataTable server side processing dengan CodeIgniter 3. Walaupun ada sebuah library DataTable untuk CodeIgniter yang dikembangkan oleh seorang Developer yaitu Ignited DataTable.

Tapi Setelah saya coba menggunakan Ignited DataTable ini hanya bisa berjalan lancar pada CodeIgniter versi 2, Untuk CodeIgniter 3 Ignited DataTable masih banyak bugnya.

Okeh langsung saja ke Tutorialnya, Karena ini tidak menggunakan library Ignited DataTable. Disini kita membuat query manual nya bisa di letakan di Model atau Controllernya.

Berikut Coding di Modelnya dengan nama Mdata.php :

<?php
if ( ! defined('BASEPATH')) exit('No direct script access allowed');
Class Mdata extends CI_Model
{
   var $table = "tbmhs";  //table yang ingin di tampilkan
      var $select_column = array("id", "nim", "nama", "email");  //sesuaikan dengan nama field table
      var $order_column = array(null, "nim", "nama", null, null);  

      function make_query()  
      {  
           $this->db->select($this->select_column);  
           $this->db->from($this->table);  
           if(isset($_POST["search"]["value"]))  
           {  
                $this->db->like("nim", $_POST["search"]["value"]);  
                $this->db->or_like("nama", $_POST["search"]["value"]);  
           }  
           if(isset($_POST["order"]))  
           {  
                $this->db->order_by($this->order_column[$_POST['order']['0']['column']], $_POST['order']['0']['dir']);  
           }  
           else  
           {  
                $this->db->order_by('nim', 'DESC');  
           }  
      }  
      function make_datatables(){  
           $this->make_query();  
           if($_POST["length"] != -1)  
           {  
                $this->db->limit($_POST['length'], $_POST['start']);  
           }  
           $query = $this->db->get();  
           return $query->result();  
      }  
      function get_filtered_data(){  
           $this->make_query();  
           $query = $this->db->get();  
           return $query->num_rows();  
      }       
      function get_all_data()  
      {  
           $this->db->select("*");  
           $this->db->from($this->table);  
           return $this->db->count_all_results();  
      }

 }

?>

Dan Ini untuk Controllernya bernama home.php :

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Home extends CI_Controller {

 function __construct()
 {
 parent::__construct();
 $this->load->model('mdata', '', TRUE);
 $this->load->helper(array('form', 'url'));
 }

 public function content()
 {
  $data['title'] = "Data Crud";
  $data['active'] = "active";
  $this->load->view('head',$data);
  $this->load->view('nav');
  $this->load->view('content');
  $this->load->view('footer');  
 }


        function datauser() {             
           $fetch_data = $this->mdata->make_datatables();  
           $data = array();  
           foreach($fetch_data as $row)  
           {  
                $sub_array = array();                  
                $sub_array[] = $row->nim;  
                $sub_array[] = $row->nama;
                $sub_array[] = $row->email;  
                $sub_array[] = '<button type="button" name="update" id="'.$row->nim.'" class="btn btn-info btn-xs update">Update</button>';  
                $sub_array[] = '<button type="button" name="delete" id="'.$row->nim.'" class="btn btn-danger btn-xs delete">Delete</button>';  
                $data[] = $sub_array;  
           }  
           $output = array(  
                "draw"                    =>     intval($_POST["draw"]),  
                "recordsTotal"          =>      $this->mdata->get_all_data(),  
                "recordsFiltered"     =>     $this->mdata->get_filtered_data(),  
                "data"                    =>     $data  
           );  
           echo json_encode($output);  
      }  

  
}

Berikut body => content.php untuk tampilan viewnya

  <body>
  <div class="container">
  <h3>Crud Edit & Delete</h3><hr/>
<div id="info"></div>
   <div class="table-responsive">                                 
     <table id="user_data" class="table table-bordered table-striped">  
      <thead>  
           <tr>  
                <th>NIM</th>  
                <th>Nama</th>  
                <th>Email</th>
                <th>Edit</th>                                                                 
                <th>Delete</th>
           </tr>  
      </thead>  
        </table>  
      </div>  
  </div>    
                 

 <script type="text/javascript" language="javascript">
 $(document).ready(function(){  
      var dataTable = $('#user_data').DataTable({  
           "processing":true,  
           "serverSide":true,  
           "order":[],  
           "ajax":{  
                url:"<?php echo base_url() .'home/datauser'; ?>",  
                type:"POST"  
           },  
           "columnDefs":[  
                {  
                     "targets":[0, 3, 4],  // sesuaikan order table dengan jumlah column
                     "orderable":false,  
                },  
           ],  
      });  
     
 });  

 </script>  

Berikut Tutorial cara membuat DataTable server side CodeIgniter walaupun agak jlimet ^_^ untuk seorang newbi, tapi mangga di coba.
Sebenarnya hampir sama di untu postingan saya kemarin tentang validasi Ajax CodeIgniter tentang Crud.
Okeh untuk Link demo berikut hasil nya : Demo DataTable Server Side CodeIgniter Example
Untuk Link Download Berikut : Downlod DataTable Server Side Processing CodeIgniter 3

Okeh Terimakasih Semoga Bermanfaat 

Share