Datatable merupakan library yang sangat bagus untuk menampilkan data dari database ke view dalam bentuk table dengan dengan fitur filter, pagination, show perpege, dan sort by.

Bagi anda yang bergelut di bidang backend development tutorial ini akan sangat bermanfaat bagi anda.

Datatable banyak menuai kontroversi bagi developer web. Hal ini dikarenakan datatable meload semua data yang ada di suatu table di database kemudian di tampilkan dalam bentuk datatable sehingga ada filter, pagination, show perpege, dan sort by.

Ketika data yang diload masih sedikit, tidak ada masalah terlihat. Akan tetapi ketika data yang diload telah mencapai jutaan record akan terlihat masalah lamanya data yang load, sehingga sering mengalami not responding pada browser.

Setelah cukup lama mencari solusi untuk masalah tersebut. Akhirnya problem solved, solusinya yaitu datatable serverside processing.

Dengan mentitik beratkan semua pemrosesan pada sisi server akan membuat sisi client menjadi ringan dan cepat. hal ini disebabkan data tidak diload secara keseluruhan dari database.

Melainkan dilimit oleh sisi server sesuai dengan request yang dilkukan clientside. Dengan begitu, berapun jumlah record yang akan ditampilkan tidak ada lagi masalah terlihat.

Ok, sekarang mari kita langsung praktekkan.

Pertama-tama tentu saja anda harus memiliki codeigniter terlebih dahulu. Jika anda belum memilikinya silahkan download di official websitenya www.codeigniter.com.

Selain codeigniter, ada beberapa file yang harus dipersiapkan yaitu: jquery datatable. Anda bisa mendownloadnya di official websitenya. Jika anda tidak ingin downloadnya atau bingung bagaimana mendownloadnya. Jangan khawatir karena telah saya siapkan semua yang butuhkan didalam source code yang bisa anda download di akhir tutorial ini.

Sekarang silahkan ikuti langkah berikut:

 

1. Buat database dan table dengan mengeksekusi query berikut:

CREATE DATABASE db_serverside;
USE db_serverside;

CREATE TABLE tbl_user(
user_id INT PRIMARY KEY AUTO_INCREMENT,
user_nama VARCHAR(40),
user_email VARCHAR(50),
user_alamat VARCHAR(100)
)ENGINE=INNODB;

2. Insert data ke table user dengan mengeksekusi query berikut:

INSERT INTO tbl_user(user_nama,user_email,user_alamat)VALUES
('User ke-1','email@gmail.com','Alamat ke-1'),
('User ke-2','email@gmail.com','Alamat ke-2'),
('User ke-3','email@gmail.com','Alamat ke-3'),
('User ke-4','email@gmail.com','Alamat ke-4'),
('User ke-5','email@gmail.com','Alamat ke-5'),
('User ke-6','email@gmail.com','Alamat ke-6'),
('User ke-7','email@gmail.com','Alamat ke-7'),
('User ke-8','email@gmail.com','Alamat ke-8'),
('User ke-9','email@gmail.com','Alamat ke-9'),
('User ke-10','email@gmail.com','Alamat ke-10'),
('User ke-11','email@gmail.com','Alamat ke-11'),
('User ke-12','email@gmail.com','Alamat ke-12'),
('User ke-13','email@gmail.com','Alamat ke-13'),
('User ke-14','email@gmail.com','Alamat ke-14'),
('User ke-15','email@gmail.com','Alamat ke-15');

Disni saya hanya menginputkan 15 record, silahkan input data sebanyak-banyaknya. Semakin banyak data yang anda inputkan semakin bagus.

3. Install codeigniter

Extract codeigniter ke www (jika menggunakan wampserver) atau htdocs (jika menggunakan XAMPP). Kemudian rename project codeigniter anda sesuai dengan project Anda. Disini saya memberi nama ci_serverside.

Setelah installasi, buat folder assets dan sertakan file datatable dan jquery didalam folder assets. Sehingga terlihat struktur project kita seperti berikut:

4. Konfigusai beberapa file berikut:

Buka application/config/autoload.php atur menjadi seperti berikut:

$autoload['libraries'] = array('database');
$autoload['helper'] = array('url');

Buka application/config/config.php dan atur menjadi seperti berikut:

$config['base_url'] = 'http://localhost/ci_serverside/';

Terakhir buka application/config/database.php

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
        'dsn'   => '',
        'hostname' => 'localhost',
        'username' => 'root',
        'password' => '',
        'database' => 'db_serverside',
        'dbdriver' => 'mysqli',
        'dbprefix' => '',
        'pconnect' => FALSE,
        'db_debug' => (ENVIRONMENT !== 'production'),
        'cache_on' => FALSE,
        'cachedir' => '',
        'char_set' => 'utf8',
        'dbcollat' => 'utf8_general_ci',
        'swap_pre' => '',
        'encrypt' => FALSE,
        'compress' => FALSE,
        'stricton' => FALSE,
        'failover' => array(),
        'save_queries' => TRUE
);

 

5. Buat Model dengan nama User_model.php dengan kode sebagai berikut:

<?php

class User_model extends CI_Model {

        var $table = 'tbl_user'; //nama tabel dari database
        var $column_order = array(null, 'user_nama','user_email','user_alamat'); //field yang ada di table user
        var $column_search = array('user_nama','user_email','user_alamat'); //field yang diizin untuk pencarian 
        var $order = array('user_id' => 'asc'); // default order 

        public function __construct()
        {
                parent::__construct();
                $this->load->database();
        }

        private function _get_datatables_query()
        {
                
                $this->db->from($this->table);

                $i = 0;
        
                foreach ($this->column_search as $item) // looping awal
                {
                        if($_POST['search']['value']) // jika datatable mengirimkan pencarian dengan metode POST
                        {
                                
                                if($i===0) // looping awal
                                {
                                        $this->db->group_start(); 
                                        $this->db->like($item, $_POST['search']['value']);
                                }
                                else
                                {
                                        $this->db->or_like($item, $_POST['search']['value']);
                                }

                                if(count($this->column_search) - 1 == $i) 
                                        $this->db->group_end(); 
                        }
                        $i++;
                }
                
                if(isset($_POST['order'])) 
                {
                        $this->db->order_by($this->column_order[$_POST['order']['0']['column']], $_POST['order']['0']['dir']);
                } 
                else if(isset($this->order))
                {
                        $order = $this->order;
                        $this->db->order_by(key($order), $order[key($order)]);
                }
        }

        function get_datatables()
        {
                $this->_get_datatables_query();
                if($_POST['length'] != -1)
                $this->db->limit($_POST['length'], $_POST['start']);
                $query = $this->db->get();
                return $query->result();
        }

        function count_filtered()
        {
                $this->_get_datatables_query();
                $query = $this->db->get();
                return $query->num_rows();
        }

        public function count_all()
        {
                $this->db->from($this->table);
                return $this->db->count_all_results();
        }

}

 

6. Buat Controller dengan nama User.php dengan kode sebagai berikut:

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

class User extends CI_Controller {

        function __construct(){
                parent::__construct();
                $this->load->model('User_model');
        }

        function index(){
                $this->load->view('user_view');
        }

        function get_data_user()
        {
                $list = $this->User_model->get_datatables();
                $data = array();
                $no = $_POST['start'];
                foreach ($list as $field) {
                        $no++;
                        $row = array();
                        $row[] = $no;
                        $row[] = $field->user_nama;
                        $row[] = $field->user_email;
                        $row[] = $field->user_alamat;

                        $data[] = $row;
                }

                $output = array(
                        "draw" => $_POST['draw'],
                        "recordsTotal" => $this->User_model->count_all(),
                        "recordsFiltered" => $this->User_model->count_filtered(),
                        "data" => $data,
                );
                //output dalam format JSON
                echo json_encode($output);
        }

}

 

7. Buat View dengan nama user_view.php dengan kode sebagai berikut:

<!DOCTYPE html>
<html>
    <head> 
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Datatable Serverside Codeigniter</title>
    <link href="<?php echo base_url('assets/datatables/css/jquery.dataTables.min.css')?>" rel="stylesheet">

    </head> 
<body>
    <div class="container">
        <h1 style="font-size:20pt">Datatable Serverside Codeigniter</h1>

        <h3>Data Users</h3>
        <br />
       
        <table id="table" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Nama</th>
                    <th>Email</th>
                    <th>Alamat</th>
                </tr>
            </thead>
            <tbody>
            </tbody>

            <tfoot>
                <tr>
                    <th>No</th>
                    <th>Nama</th>
                    <th>Email</th>
                    <th>Alamat</th>
                </tr>
            </tfoot>
        </table>
    </div>

<script src="<?php echo base_url('assets/jquery/jquery-2.2.3.min.js')?>"></script>
<script src="<?php echo base_url('assets/datatables/js/jquery.dataTables.min.js')?>"></script>


<script type="text/javascript">
    var table;
    $(document).ready(function() {

        //datatables
        table = $('#table').DataTable({ 

            "processing": true, 
            "serverSide": true, 
            "order": [], 
            
            "ajax": {
                "url": "<?php echo site_url('user/get_data_user')?>",
                "type": "POST"
            },

            
            "columnDefs": [
            { 
                "targets": [ 0 ], 
                "orderable": false, 
            },
            ],

        });

    });

</script>

</body>
</html>

Jika selesai, jalankan controller user dengan mengunjungi URL berikut:

http://localhost/ci_serverside/index.php/user

Ok, sekian dulu tutuorial kali ini, semoga bermanfaat dan Keep Coding!

Download Source