Membuat Datatables Server Side di Codeiniter 3

Untuk penanganan data dalam jumlah kecil, penggunaan datatables client side di rasa cukup dan tidak akan terlihat loading yang lambat. Tetapi untuk jumlah data yang besar hal ini akan sangat terasa ketika halaman di load pertama kali. Solusi dari permasalahan ini adalah penggunaan datatables server side, karena pemrosesan dilakukan di sisi server dan tidak semua data akan di load.

Kali ini kita akan membuat datatables dengan metode server side untuk penanganan data yang besar. Kita akan menggunakan database yang sudah pernah kita gunakan pada artikel-artikel sebelumnya atau dapat di download pada menu download pilih database daerah.sql

Langsung saja untuk membuat datatables server side sebagai berikut:
Membuat model

Buat model dengan nama Serverside_model.php, kemudian ketikkan script dibawah

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

class Serverside_model extends CI_Model
{
    function __construct()
    {
        parent::__construct();
    }

    var $column_order = array(null, 'kelurahan.nama', 'kecamatan.nama', 'kabupaten.nama', 'provinsi.nama');
    var $column_search = array('kelurahan.nama', 'kecamatan.nama', 'kabupaten.nama',  'provinsi.nama');
    var $order = array('id_kel' => 'asc');

    private function _get_datatables_query()
    {
        $this->db->select('kelurahan.nama AS nm_kel, kecamatan.nama AS nm_kec, kabupaten.nama AS nm_kab, provinsi.nama AS nm_prov');
        $this->db->from('kelurahan');
        $this->db->join('kecamatan', 'kelurahan.id_kec = kecamatan.id_kec', 'left');
        $this->db->join('kabupaten', 'kecamatan.id_kab = kabupaten.id_kab', 'left');
        $this->db->join('provinsi', 'kabupaten.id_prov = provinsi.id_prov', 'left');

        $i = 0;

        foreach ($this->column_search as $item) {
            if ($_POST['search']['value']) {

                if ($i === 0) {
                    $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();
    }

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

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

<?php

defined('BASEPATH') or exit('No direct script access allowed');

class Serverside_model extends CI_Model

{

function __construct()

{

parent::__construct();

}

var $column_order = array(null, 'kelurahan.nama', 'kecamatan.nama', 'kabupaten.nama', 'provinsi.nama');

var $column_search = array('kelurahan.nama', 'kecamatan.nama', 'kabupaten.nama', 'provinsi.nama');

var $order = array('id_kel' => 'asc');

private function _get_datatables_query()

{

$this->db->select('kelurahan.nama AS nm_kel, kecamatan.nama AS nm_kec, kabupaten.nama AS nm_kab, provinsi.nama AS nm_prov');

$this->db->from('kelurahan');

$this->db->join('kecamatan', 'kelurahan.id_kec = kecamatan.id_kec', 'left');

$this->db->join('kabupaten', 'kecamatan.id_kab = kabupaten.id_kab', 'left');

$this->db->join('provinsi', 'kabupaten.id_prov = provinsi.id_prov', 'left');

$i = 0;

foreach ($this->column_search as $item) {

if ($_POST['search']['value']) {

if ($i === 0) {

$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();

}

public function count_filtered()

{

$this->_get_datatables_query();

$query = $this->db->get();

return $query->num_rows();

}

public function count_all()

{

$this->db->from('kelurahan');

return $this->db->count_all_results();

}

Membuat controller
Buat controller dengan nama Serverside.php, kemudian ketikkan script dibawah:

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

class Serverside extends CI_Controller
{

    public function __construct()
    {
        parent::__construct();
        $this->load->model('Serverside_model', 'Serverside');
    }

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

    public function listdata()
    {
        $list = $this->Serverside->get_datatables();
        $data = array();
        $no   = $_POST['start'];
        if (isset($_POST['start']) && isset($_POST['draw'])) {
            $no = $_POST['start'];
        } else {
            die();
        };

        foreach ($list as $dt) {
            $no++;
            $row   = array();
            $row[] = $no;
            $row[] = $dt->nm_kel;
            $row[] = $dt->nm_kec;
            $row[] = $dt->nm_kab;
            $row[] = $dt->nm_prov;
            $data[] = $row;
        }

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

<?php

defined('BASEPATH') or exit('No direct script access allowed');

class Serverside extends CI_Controller

{

public function __construct()

{

parent::__construct();

$this->load->model('Serverside_model', 'Serverside');

}

public function index()

{

$this->load->view('serverside');

}

public function listdata()

{

$list = $this->Serverside->get_datatables();

$data = array();

$no = $_POST['start'];

if (isset($_POST['start']) && isset($_POST['draw'])) {

$no = $_POST['start'];

} else {

die();

};

foreach ($list as $dt) {

$no++;

$row = array();

$row[] = $no;

$row[] = $dt->nm_kel;

$row[] = $dt->nm_kec;

$row[] = $dt->nm_kab;

$row[] = $dt->nm_prov;

$data[] = $row;

}

$output = array(

"draw" => $_POST['draw'],

"recordsTotal" => $this->Serverside->count_all(),

"recordsFiltered" => $this->Serverside->count_filtered(),

"data" => $data,

);

echo json_encode($output);

}

Membuat view
Buat view dengan nama serverside.php, kemudian ketikkan script dibawah:

<!DOCTYPE html>
<html>

<head>
    <title>Codeigniter - Datatables Server Side</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

    <!-- JQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

    <!-- Datatables -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">

    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>

</head>

<body>
    <div class="container">
        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        Datatables Server Side
                    </div>
                    <div class="card-body">
                        <div class="responsive">
                            <table id="list_data" class="table display row-border table-striped compact" style="width: 100%;">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Kelurahan</th>
                                        <th>Kecamatan</th>
                                        <th>Kabupaten</th>
                                        <th>Provinsi</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            var dataTable_;
            $(document).ready(function() {
                dataTable_ = $('#list_data').DataTable({
                    processing: true,
                    serverSide: true,
                    searching: true,
                    info: true,
                    paging: true,                   
                    lengthChange: true,
                    ordering: true,
                    ajax: {
                        url: '<?php echo base_url('serverside/listdata'); ?>',
                        type: "POST"
                    },
                });
            })
        </script>
</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Codeigniter - Datatables Server Side</title>

</head>

<body>

Datatables Server Side

</div>

<thead>

<tr>

<th>Kelurahan</th>

<th>Kecamatan</th>

<th>Kabupaten</th>

<th>Provinsi</th>

</tr>

</thead>

</table>

</div>

var dataTable_;

$(document).ready(function() {

dataTable_ = $('#list_data').DataTable({

processing: true,

serverSide: true,

searching: true,

info: true,

paging: true,

lengthChange: true,

ordering: true,

ajax: {

url: '<?php echo base_url('serverside/listdata'); ?>',

type: "POST"

});

})

</script>

</body>

</html>

Jika langkah-langkah di atas sudah sesuai maka akan didapatkan hasil seperti berikut ini

Nah, demikian bahasan kita kali ini tentang datatables server side. Jika ada yang kurang jelas silahkan isi kolom komentar. Terimakasih.
Sumber : https://mylitenotes.com/

Dibaca: 6,696

Baca Juga

Rekomendasi untuk kamu