1. Home
  2. read
  3. Tutorial Cara membuat Datatables Serverside dengan CodeIgniter 3

Tutorial Cara membuat Datatables Serverside dengan CodeIgniter 3



Tutorial Cara membuat Datatables Serverside dengan CodeIgniter 3


Halo Semua sahabat codekop.com, kali ini saya ingin membagi pengalaman cara membuat DataTables Serverside dengan CodeIgniter, dari kalian yang suka ngulik-ngulik website, khususnya pada backend development, kalian pasti cukup tau dengan DataTables, Ya Datatables merupakan library untuk menampilkan data dengan mengubah bentuk table, ke dalam fitur-fitur seperti search, filter, pagination, show perpage, sort by dan sebagainya.

Membuat tabel dengan library dataTables secara biasa tentu sudah sering kalian lakukan. Namun berbeda caranya jika dilakukan secara ServerSide dan pada framework codeigniter.

 

Mengapa Harus Serverside ?

Karena jika data kalian masih sedikit yang harus load, maka biasanya gak ada masalah, tetapi jika data kalian yang sudah banyak, misal sudah ribuan, ratusan ribu atau jutaan, sering sekali mengalami kendala seperti tidak terload nya data, atau not responding pada browser karena banyak loop data yang di sajikan dalam 1 halaman. Hal ini membebankan server karena meload data terlalu lama, dan biasanya kadang data tersebut tidak terproses dengan baik.

Jadi solusi terbaik adalah datatables serverside processing.

Dengan melibatkan 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, mengikuti request yang dilakukan clientside.

 

Nah langsung saya kita praktekan :

Pertama-tama anda harus punya dulu file CodeIgniter, langsung aja download codeigniter di www.codeigniter.com , saya memakai versi 3.1.11 atau yang stabilnya.

 

1. Selanjutnya anda buat databasenya  saya beri namanya dbnya lab_serverside atau copykan saya code dibawah ini simpan dengan nama dengan akhiran .sql lalu buat database pada phpmyadmin dan import :

 

-- phpMyAdmin SQL Dump
-- version 4.9.1
-- https://www.phpmyadmin.net/
--
-- Host: localhost
-- Generation Time: Jan 18, 2020 at 07:37 AM
-- Server version: 10.4.8-MariaDB
-- PHP Version: 7.3.10

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `lab_serverside`
--

-- --------------------------------------------------------

--
-- Table structure for table `artikel`
--

CREATE TABLE `artikel` (
  `id_artikel` int(11) NOT NULL,
  `judul` varchar(255) NOT NULL,
  `kategori` varchar(255) NOT NULL,
  `penulis` varchar(255) NOT NULL,
  `tgl_posting` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Dumping data for table `artikel`
--

INSERT INTO `artikel` (`id_artikel`, `judul`, `kategori`, `penulis`, `tgl_posting`) VALUES
(1, 'Pengenalan HTML', 'HTML', 'Joe Doe', '2020-01-11 02:06:12'),
(2, 'Pengenalan CSS', 'CSS', 'Joe Doe', '2020-01-11 00:00:00'),
(3, 'Pengenalan PHP', 'PHP', 'Joe Doe', '2020-01-11 02:06:12'),
(4, 'Pengenalan JavaScript', 'JS', 'Joe Doe', '2020-01-11 00:00:00'),
(5, 'Pengenalan MySQL', 'mysql', 'Joe Doe', '2020-01-11 00:00:00'),
(6, 'Advanced PHP', 'PHP', 'Joe Doe', '2020-01-11 00:00:00'),
(7, 'Pengenalan Vue JS', 'JS', 'Joe Doe', '2020-01-11 00:00:00'),
(8, 'Framework PHP', 'PHP', 'Joe Doe', '2020-01-11 00:00:00'),
(9, 'Basic CodeIgniter', 'PHP', 'Joe Doe', '2020-01-11 00:00:00');

-- --------------------------------------------------------

--
-- Table structure for table `kategori`
--

CREATE TABLE `kategori` (
  `id_kategori` int(11) NOT NULL,
  `nama_kategori` varchar(255) NOT NULL,
  `tgl_buat` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Dumping data for table `kategori`
--

INSERT INTO `kategori` (`id_kategori`, `nama_kategori`, `tgl_buat`) VALUES
(1, 'Tutorial', '2020-01-12 00:00:00'),
(2, 'Teknologi', '2020-01-12 00:00:00'),
(3, 'Database', '2020-01-12 00:00:00'),
(4, 'Pemrograman', '2020-01-12 00:00:00'),
(5, 'JavaScript', '2020-01-12 00:00:00'),
(6, 'Framework', '2020-01-12 00:00:00');

-- --------------------------------------------------------

--
-- Table structure for table `subkat`
--

CREATE TABLE `subkat` (
  `id_subkat` int(11) NOT NULL,
  `subkat` varchar(255) NOT NULL,
  `id_kategori` int(11) NOT NULL,
  `tgl_add` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Dumping data for table `subkat`
--

INSERT INTO `subkat` (`id_subkat`, `subkat`, `id_kategori`, `tgl_add`) VALUES
(1, 'HTML', 1, '2020-01-12 00:00:00'),
(2, 'CSS', 1, '2020-01-12 00:00:00'),
(3, 'PHP', 1, '2020-01-12 00:00:00'),
(4, 'JavaScript', 1, '2020-01-12 00:00:00'),
(5, 'Gojek', 2, '2020-01-12 00:00:00'),
(6, 'Grab', 2, '2020-01-12 00:00:00'),
(7, 'MySQL', 3, '2020-01-12 00:00:00'),
(8, 'MongoDB', 3, '2020-01-12 00:00:00'),
(9, 'PHP', 4, '2020-01-12 00:00:00'),
(10, 'Golang', 4, '2020-01-12 00:00:00'),
(11, 'Node JS', 4, '2020-01-12 00:00:00'),
(12, 'Phyton', 4, '2020-01-12 00:00:00'),
(13, 'Ruby', 4, '2020-01-12 00:00:00'),
(14, 'ASP', 4, '2020-01-12 00:00:00'),
(15, 'Vue JS', 5, '2020-01-12 00:00:00'),
(16, 'React JS', 5, '2020-01-12 00:00:00'),
(17, 'Angular JS', 5, '2020-01-12 00:00:00'),
(18, 'jQuery', 5, '2020-01-12 00:00:00'),
(19, 'CodeIgniter', 6, '2020-01-12 00:00:00'),
(20, 'Laravel', 6, '2020-01-12 00:00:00'),
(21, 'Symfony', 6, '2020-01-12 00:00:00'),
(22, 'Ruby On Rails', 6, '2020-01-12 00:00:00');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `artikel`
--
ALTER TABLE `artikel`
  ADD PRIMARY KEY (`id_artikel`);

--
-- Indexes for table `kategori`
--
ALTER TABLE `kategori`
  ADD PRIMARY KEY (`id_kategori`);

--
-- Indexes for table `subkat`
--
ALTER TABLE `subkat`
  ADD PRIMARY KEY (`id_subkat`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `artikel`
--
ALTER TABLE `artikel`
  MODIFY `id_artikel` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=10;

--
-- AUTO_INCREMENT for table `kategori`
--
ALTER TABLE `kategori`
  MODIFY `id_kategori` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;

--
-- AUTO_INCREMENT for table `subkat`
--
ALTER TABLE `subkat`
  MODIFY `id_subkat` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=23;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

 

2. Install CodeIgniter

Langkah berikut nya install CodeIgniternya ke htdocs jika menggunakan XAMPP lalu rename folder tersebut dengan nama serverside

3. Konfigurasi CodeIgniter
  1. setting file autoload.php pada folder application/config/autoload.php

    $autoload['libraries'] = array('database');
    $autoload['helper'] = array('url');
  2. lalu setting file config.php pada folder application/config/config.php

    $config['base_url'] = "http://".$_SERVER['HTTP_HOST'];
    $config['base_url'] .= preg_replace('@/+$@','',dirname($_SERVER['SCRIPT_NAME'])).'/';
    
    
    $config['index_page'] = '';

     

  3. lalu connect kan database anda ke CodeIgniter, setting file datatabase.php pada folder application/config/database.php

    $active_group = 'default';
    $query_builder = TRUE;
    
    $db['default'] = array(
    	'dsn'	=> '',
    	'hostname' => 'localhost',
    	'username' => 'root',
    	'password' => '',
    	'database' => 'lab_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
    );
    


  4. dan terakhir buat file .htaccess untuk menghilangkan penggunaan index.php pada tangkapan url :

    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php/$1 [L]

     

4. Langkah selanjutnya buatlah Model dengan nama M_Datatables.php taruh di folder application/models dengan kode berikut :
<?php

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

        function get_tables($tables,$cari)
        {
            // Ambil data yang di ketik user pada textbox pencarian
            $search = preg_replace("/[^a-zA-Z0-9.]/", '', "{$_POST['search']['value']}");
            // Ambil data limit per page
            $limit = preg_replace("/[^a-zA-Z0-9.]/", '', "{$_POST['length']}");
            // Ambil data start
            $start =preg_replace("/[^a-zA-Z0-9.]/", '', "{$_POST['start']}"); 
            
            $sql = $this->db->get($tables);

            $sql_count = $sql->num_rows();

            $query = $tables;
            $cari = implode(" LIKE '%".$search."%' OR ", $cari)." LIKE '%".$search."%'";

            
            // Untuk mengambil nama field yg menjadi acuan untuk sorting
            $order_field = $_POST['order'][0]['column']; 

            // Untuk menentukan order by "ASC" atau "DESC"
            $order_ascdesc = $_POST['order'][0]['dir']; 
            $order = " ORDER BY ".$_POST['columns'][$order_field]['data']." ".$order_ascdesc;

            $sql_data = $this->db->query("SELECT * FROM ".$query." WHERE (".$cari.")".$order." LIMIT ".$limit." OFFSET ".$start);
            $sql_filter = $this->db->query("SELECT * FROM ".$query);
            $sql_filter_count = $sql_filter->num_rows();
            $data = $sql_data->result_array();

            $callback = array(    
                'draw' => $_POST['draw'], // Ini dari datatablenya    
                'recordsTotal' => $sql_count,    
                'recordsFiltered'=>$sql_filter_count,    
                'data'=>$data
            );

            return json_encode($callback); // Convert array $callback ke json
        }

        function get_tables_where($tables,$cari,$where)
        {
            // Ambil data yang di ketik user pada textbox pencarian
            $search = preg_replace("/[^a-zA-Z0-9.]/", '', "{$_POST['search']['value']}");
            // Ambil data limit per page
            $limit = preg_replace("/[^a-zA-Z0-9.]/", '', "{$_POST['length']}");
            // Ambil data start
            $start =preg_replace("/[^a-zA-Z0-9.]/", '', "{$_POST['start']}"); 

            $setWhere = array();
            foreach ($where as $key => $value)
            {
                $setWhere[] = $key."='".$value."'";
            }

            $fwhere = implode(' AND ', $setWhere);

            $sql = $this->db->query("SELECT * FROM ".$tables." WHERE ".$fwhere);
            $sql_count = $sql->num_rows();

            $query = $tables;
            $cari = implode(" LIKE '%".$search."%' OR ", $cari)." LIKE '%".$search."%'";
            
            // Untuk mengambil nama field yg menjadi acuan untuk sorting
            $order_field = $_POST['order'][0]['column']; 

            // Untuk menentukan order by "ASC" atau "DESC"
            $order_ascdesc = $_POST['order'][0]['dir']; 
            $order = " ORDER BY ".$_POST['columns'][$order_field]['data']." ".$order_ascdesc;

            $sql_data = $this->db->query("SELECT * FROM ".$query." WHERE ".$fwhere." AND (".$cari.")".$order." LIMIT ".$limit." OFFSET ".$start);
            $sql_filter = $this->db->query("SELECT * FROM ".$tables." WHERE ".$fwhere);
            $sql_filter_count = $sql_filter->num_rows();
            $data = $sql_data->result_array();
            
            $callback = array(    
                'draw' => $_POST['draw'], // Ini dari datatablenya    
                'recordsTotal' => $sql_count,    
                'recordsFiltered'=>$sql_filter_count,    
                'data'=>$data
            );
            return json_encode($callback); // Convert array $callback ke json
        }

        function get_tables_query($query,$cari, $where)
        {
            // Ambil data yang di ketik user pada textbox pencarian
            $search = preg_replace("/[^a-zA-Z0-9.]/", '', "{$_POST['search']['value']}");
            // Ambil data limit per page
            $limit = preg_replace("/[^a-zA-Z0-9.]/", '', "{$_POST['length']}");
            // Ambil data start
            $start =preg_replace("/[^a-zA-Z0-9.]/", '', "{$_POST['start']}"); 

            if($where != null)
            {
                $setWhere = array();
                foreach ($where as $key => $value)
                {
                    $setWhere[] = $key."='".$value."'";
                }
    
                $fwhere = implode(' AND ', $setWhere);

                $sql = $this->db->query($query." WHERE ".$fwhere);
                $sql_count = $sql->num_rows();
    
                $cari = implode(" LIKE '%".$search."%' OR ", $cari)." LIKE '%".$search."%'";
                
                // Untuk mengambil nama field yg menjadi acuan untuk sorting
                $order_field = $_POST['order'][0]['column']; 
    
                // Untuk menentukan order by "ASC" atau "DESC"
                $order_ascdesc = $_POST['order'][0]['dir']; 
                $order = " ORDER BY ".$_POST['columns'][$order_field]['data']." ".$order_ascdesc;
    
                $sql_data = $this->db->query($query." WHERE ".$fwhere." AND (".$cari.")".$order." LIMIT ".$limit." OFFSET ".$start);
                $sql_filter = $this->db->query($query." WHERE ".$fwhere);
                $sql_filter_count = $sql_filter->num_rows();
                $data = $sql_data->result_array();

            }else{

                $sql = $this->db->query($query);
                $sql_count = $sql->num_rows();
    
                $cari = implode(" LIKE '%".$search."%' OR ", $cari)." LIKE '%".$search."%'";
                
                // Untuk mengambil nama field yg menjadi acuan untuk sorting
                $order_field = $_POST['order'][0]['column']; 
    
                // Untuk menentukan order by "ASC" atau "DESC"
                $order_ascdesc = $_POST['order'][0]['dir']; 
                $order = " ORDER BY ".$_POST['columns'][$order_field]['data']." ".$order_ascdesc;
    
                $sql_data = $this->db->query($query." WHERE (".$cari.")".$order." LIMIT ".$limit." OFFSET ".$start);
                $sql_filter = $this->db->query($query);
                $sql_filter_count = $sql_filter->num_rows();
                $data = $sql_data->result_array();

            }
            
            $callback = array(    
                'draw' => $_POST['draw'], // Ini dari datatablenya    
                'recordsTotal' => $sql_count,    
                'recordsFiltered'=>$sql_filter_count,    
                'data'=>$data
            );
            return json_encode($callback); // Convert array $callback ke json
        }

    }

 

5. lalu buat file controller dengan nama Datatables.php
<?php

    class Datatables extends CI_Controller
    {
        public function __construct()
        {  
            parent::__construct();
            $this->load->model('M_Datatables');
        }

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

        public function onetable()
        {
            $this->load->view('onetable');

        }

        public function tablewhere()
        {
            $this->load->view('tablewhere');

        }

        public function tablequery()
        {
            $this->load->view('tablequery');

        }

        function view_data()
        {
            $tables = "artikel";
            $search = array('judul','kategori','penulis','tgl_posting');
            header('Content-Type: application/json');
            echo $this->M_Datatables->get_tables($tables,$search);
        }

        function view_data_where()
        {
            $tables = "artikel";
            $search = array('judul','kategori','penulis','tgl_posting');
            $where  = array('kategori' => 'php');
            header('Content-Type: application/json');
            echo $this->M_Datatables->get_tables_where($tables,$search,$where);
        }

        function view_data_query()
        {
            $query  = "SELECT kategori.nama_kategori AS nama_kategori, subkat.* FROM subkat 
                       JOIN kategori ON subkat.id_kategori = kategori.id_kategori";
            $search = array('nama_kategori','subkat','tgl_add');
            $where  = null; 
            // $where  = array('nama_kategori' => 'Tutorial');
            header('Content-Type: application/json');
            echo $this->M_Datatables->get_tables_query($query,$search,$where);
        }
    }
?>

 

dalam controller disini kita buat 3 kondisi untuk keluaran json untuk datatablesnya, yaitu :

  1. fungsi view_data() : menampilkan data berdasarkan paramater nama table, kolom apa aja yang bisa dicari ($tables, $search)
  2. fungsi view_data_where() : menampilkan data berdasarkan paramater nama table, kolom apa aja yang bisa dicari, dan dengan paramater where untuk kondisi data yang ingin ditampilkan ($tables, $search, $where)
  3. fungsi view_data_query() : menampilkan data dengan membuat query sql nya pada paramater $query, kolom apa aja yang bisa dicari ($search), dan dengan paramater where untuk kondisi data yang ingin ditampilkan ($where) pada view_data_query anda bisa tidak membuat kondisi where, hanya tinggal di null bagian variabel $where, atau ingin membuat kondisi where dengan mengisi data array variabel $where

 

6. buat view data nya pada folder application/views buat 4 File :
  1. file home.php : disini file utama pada home.php yang merupakan halaman utama nya :

    <!doctype html>
    <html lang="en">
      <head>
        <title>Datatables Server Side Tutorial</title>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
        <!-- Bootstrap CSS --><!-- BOOTSTRAP 4-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
        <!-- DATATABLES BS 4-->
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" />
    
        <!-- jQuery -->
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
        <!-- DATATABLES BS 4-->
        <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
        <!-- BOOTSTRAP 4-->
        <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
        
      </head>
      <body>
        <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
    
            <a class="navbar-brand" href="">Datatables Server Side CodeIgniter <?php echo CI_VERSION; ?></a>
            <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
                aria-expanded="false" aria-label="Toggle navigation"></button>
                
            <div class="collapse navbar-collapse" id="collapsibleNavId">
              <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item active">
                  <a class="nav-link" href="javascript:void(0)" onclick="mytable()">One Table </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="javascript:void(0)" onclick="mytablewhere()">Table Where</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="javascript:void(0)" onclick="mytablequery()">Tables With SQL JOIN Query</a>
                </li>
              </ul>
            </div>
        </nav>
        <div class="container">
          <br/>
          <div id="tampil"></div>
          <br/>
        </div>
        <br/>
        <hr/>
          <center>Dibuat dengan <i class="fa fa-heart" style="color:red;"></i> Oleh <a href="https://www.codekop.com/" target="_blank">Codekop</a> © 2020</center>
        <br/>
        <script>
    
          function mytable() {
            $('#tampil').load('<?= base_url("datatables/onetable");?>');
          }
    
          function mytablewhere() {
            $('#tampil').load('<?= base_url("datatables/tablewhere");?>');
          }
    
          function mytablequery() {
            $('#tampil').load('<?= base_url("datatables/tablequery");?>');
          }
    
          $('li > a').click(function() {
            $('li').removeClass();
            $('li').parent().addClass('nav-item');
            $(this).parent().addClass('nav-item active');
          });
    
          // root 
          $('#tampil').load('<?= base_url("datatables/onetable");?>');
        </script>
      </body>
    </html>


  2. buat onetable.php

          <div class="card">
            <div class="card-header"> 
              <h4> Select One Table</h4>
            </div>
            <div class="card-body">
                <table class="table table-striped table-bordered" id="table-artikel">
                  <thead>
                    <tr>
                      <th> No. </th>
                      <th> Judul Artikel</th>
                      <th> Kategori </th>
                      <th> Penulis </th>
                      <th> Tanggal Posting </th>
                      <th> Aksi </th>
                    </tr>
                  </thead>
                  <tbody></tbody>
                </table>
                <br/>
            </div>
          </div>
        <!-- Optional JavaScript -->
        <script>
          var tabel = null;
          $(document).ready(function() {
              tabel = $('#table-artikel').DataTable({
                  "processing": true,
                  "serverSide": true,
                  "ordering": true, // Set true agar bisa di sorting
                  "order": [[ 0, 'asc' ]], // Default sortingnya berdasarkan kolom / field ke 0 (paling pertama)
                  "ajax":
                  {
                    "url": "<?= base_url('datatables/view_data');?>", // URL file untuk proses select datanya
                    "type": "POST"
                  },
                  "deferRender": true,
                  "aLengthMenu": [[5, 10, 50],[ 5, 10, 50]], // Combobox Limit
                  "columns": [
                      {"data": 'id_artikel',"sortable": false, 
                        render: function (data, type, row, meta) {
                          return meta.row + meta.settings._iDisplayStart + 1;
                        }  
                      },
                      { "data": "judul" }, // Tampilkan judul
                      { "data": "kategori" },  // Tampilkan kategori
                      { "data": "penulis" },  // Tampilkan penulis
                      { "data": "tgl_posting" },  // Tampilkan tgl posting
                      { "data": "id_artikel",
                        "render": 
                        function( data, type, row, meta ) {
                          return '<a href="show/'+data+'">Show</a>';
                        }
                      },
                  ],
              });
          });
        </script>

     

  3. buat tablewhere.php

          <div class="card">
            <div class="card-header">
              <h4> Table Where Statment</h4>
            </div>
            <div class="card-body">
                <table class="table table-striped table-bordered" id="table-artikel-where">
                  <thead>
                    <tr>
                      <th> No. </th>
                      <th> Judul Artikel</th>
                      <th> Kategori </th>
                      <th> Penulis </th>
                      <th> Tanggal Posting </th>
                      <th> Aksi </th>
                    </tr>
                  </thead>
                  <tbody></tbody>
                </table>
                <br/>
            </div>
          </div>
        </div>
        <!-- Optional JavaScript -->
         <!-- Optional JavaScript -->
         <script>
          var tabel = null;
          $(document).ready(function() {
              tabel = $('#table-artikel-where').DataTable({
                  "processing": true,
                  "serverSide": true,
                  "ordering": true, // Set true agar bisa di sorting
                  "order": [[ 0, 'asc' ]], // Default sortingnya berdasarkan kolom / field ke 0 (paling pertama)
                  "ajax":
                  {
                    "url": "<?= base_url('datatables/view_data_where');?>", // URL file untuk proses select datanya
                    "type": "POST"
                  },
                  "deferRender": true,
                  "aLengthMenu": [[5, 10, 50],[ 5, 10, 50]], // Combobox Limit
                  "columns": [
                      {"data": 'id_artikel',"sortable": false, 
                        render: function (data, type, row, meta) {
                          return meta.row + meta.settings._iDisplayStart + 1;
                        }  
                      },
                      { "data": "judul" }, // Tampilkan judul
                      { "data": "kategori" },  // Tampilkan kategori
                      { "data": "penulis" },  // Tampilkan penulis
                      { "data": "tgl_posting" },  // Tampilkan tgl posting
                      { "data": "id_artikel",
                        "render": 
                        function( data, type, row, meta ) {
                          return '<a href="show/'+data+'">Show</a>';
                        }
                      },
                  ],
              });
          });
        </script>

     

  4. buat tablequery.php

          <div class="card">
            <div class="card-header">
              <h4> SQL Query With Join</h4>
            </div>
            <div class="card-body">
                <table class="table table-striped table-bordered" id="table-artikel-where">
                  <thead>
                    <tr>
                      <th> No. </th>
                      <th> Judul Artikel</th>
                      <th> Kategori </th>
                      <th> Penulis </th>
                      <th> Tanggal Posting </th>
                      <th> Aksi </th>
                    </tr>
                  </thead>
                  <tbody></tbody>
                </table>
                <br/>
            </div>
          </div>
        </div>
        <!-- Optional JavaScript -->
         <!-- Optional JavaScript -->
         <script>
          var tabel = null;
          $(document).ready(function() {
              tabel = $('#table-artikel-where').DataTable({
                  "processing": true,
                  "serverSide": true,
                  "ordering": true, // Set true agar bisa di sorting
                  "order": [[ 0, 'asc' ]], // Default sortingnya berdasarkan kolom / field ke 0 (paling pertama)
                  "ajax":
                  {
                    "url": "<?= base_url('datatables/view_data_where');?>", // URL file untuk proses select datanya
                    "type": "POST"
                  },
                  "deferRender": true,
                  "aLengthMenu": [[5, 10, 50],[ 5, 10, 50]], // Combobox Limit
                  "columns": [
                      {"data": 'id_artikel',"sortable": false, 
                        render: function (data, type, row, meta) {
                          return meta.row + meta.settings._iDisplayStart + 1;
                        }  
                      },
                      { "data": "judul" }, // Tampilkan judul
                      { "data": "kategori" },  // Tampilkan kategori
                      { "data": "penulis" },  // Tampilkan penulis
                      { "data": "tgl_posting" },  // Tampilkan tgl posting
                      { "data": "id_artikel",
                        "render": 
                        function( data, type, row, meta ) {
                          return '<a href="show/'+data+'">Show</a>';
                        }
                      },
                  ],
              });
          });
        </script>

Ket : Untuk Installasi Boostrap, jQuery dan Datatables nya kita menggunakan CDN yaitu mengambil library tersebut dengan internet, jadi sediakan Internet sebelum mencoba, dan pada kolom Aksi ada link Show, itu belum dibuat silahkan untuk dimodifikasi :)

 

sekarang silahkan masukan http://localhost/serverside/datatables pada address web browser anda, jika semua langkah yang anda lakukan sudah benar maka akan muncul tampilan seperti ini :

   

      

 

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

 

source code : https://github.com/fauzan1892/datatables-serverside-ci3

 



Fauzan Falah

Penulis https://codekop.com/ , http://maswin.id/ | Github : https://github.com/fauzan1892/ | portfolio : https://fauzan.codekop.com/

Profil Penulis Semua Postingan


Komentar