Membuat DataTables Server-Side Processing Dengan PHP dan MySql

Halo teman – teman,

Dalam tutorial ini, saya akan menunjukkan kepada teman – teman cara termudah untuk mengimplementasikan DataTables jQuery Plugin dengan pemrosesan sisi server di PHP & MySql.

 

Di sini saya akan menunjukkan cara mengambil data dari database MySql menggunakan ajax di PHP. Bagi teman – teman yang belum mengetahui tentang Datatables, Datatables adalah plugin yang di bangun dari jquery untuk menampilkan data dalam bentuk table dan sudah terintegrasi search form/form pencarian dan pagination untuk penomoran data pada table.

 

Sehingga kita tidak perlu lagi membuat form pencarian pada data. dan juga kita tidak perlu lagi membuat pagination secara manual. karena kelebihan dari datatables ini adalah dia telah mengintegrasikan pagination dan form pencarian pada table data kita.

 

Namun, DataTables memiliki kelemahan jika kita mengambil semua data dari database dan melakukan pemrosesan sisi klien. Menyebabkan pemrosesan data menjadi lambat jika data dalam jumlah banyak.

 

Oke langsung saja, Pertama kita siapkan file library jquery, datatables, dan bootstrap dari CDN.
 <!--  CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css">

 <!--  Javascript -->
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>

selanjutnya kita membuat file index.php sebagai tampilan utama.

<!DOCTYPE html>
<html>
  <head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css">

    <title>Kontak</title>
  </head>
  <body>
    
  <div class="container mt-5 mb-5">
    <div class="row">
      <div class="col-12">
        <h1>Data Kontak</h1>
      </div>  
    </div>
    <hr>
    <div class="row">
      <div class="col-12">
        <div class="table-responsive">
          <table class="table table-striped table-sm">
            <thead>
              <tr>
                <th scope="col">No</th>
                <th scope="col">Nama</th>
                <th scope="col">Nomor HP</th>
                <th scope="col">Aksi</th>
              </tr>
            </thead>
            <tbody>
              <!-- List Data Menggunakan DataTable -->              
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <hr>
  </div>

 
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>


<script>
      
      $(function(){

           $('.table').DataTable({
              "processing": true,
              "serverSide": true,
              "ajax":{
                       "url": "ajax/ajax_kontak.php?action=table_data",
                       "dataType": "json",
                       "type": "POST"
                     },
              "columns": [
                  { "data": "no" },
                  { "data": "nama" },
                  { "data": "no_hp" },
                  { "data": "aksi" },
              ]  

          });
        });

    

</script>




</body>
</html>

selanjutnya kita membuat file koneksi.php sebagai koneksi ke database.

<?php
// Membuat variabel, ubah sesuai dengan nama host dan database pada hosting 
$host	= "localhost";
$user	= "root";
$pass	= "";
$db	    = "db_kontak";

//Menggunakan objek mysqli untuk membuat koneksi dan menyimpan nya dalam variabel $mysqli	
$mysqli = new mysqli($host, $user, $pass, $db);

?>

selanjutnya kita membuat file ajax_kontak.php sebagai pemrosesan data sisi server.

<?php 
require_once '../koneksi.php';

if($_GET['action'] == "table_data"){


		$columns = array( 
	                            0 =>'id', 
	                            1 =>'nama',
	                            2=> 'no_hp',
	                            3=> 'id',
	                        );

		$querycount = $mysqli->query("SELECT count(id) as jumlah FROM tbl_kontak");
		$datacount = $querycount->fetch_array();
	
  
        $totalData = $datacount['jumlah'];
            
        $totalFiltered = $totalData; 

        $limit = $_POST['length'];
        $start = $_POST['start'];
        $order = $columns[$_POST['order']['0']['column']];
        $dir = $_POST['order']['0']['dir'];
            
        if(empty($_POST['search']['value']))
        {            
        	$query = $mysqli->query("SELECT id,nama,no_hp FROM tbl_kontak order by $order $dir 
        																LIMIT $limit 
        																OFFSET $start");
        }
        else {
            $search = $_POST['search']['value']; 
            $query = $mysqli->query("SELECT id,nama,no_hp FROM tbl_kontak WHERE nama LIKE '%$search%' 
            															or no_hp LIKE '%$search%' 
            															order by $order $dir 
            															LIMIT $limit 
            															OFFSET $start");


           $querycount = $mysqli->query("SELECT count(id) as jumlah FROM tbl_kontak WHERE nama LIKE '%$search%' 
       																						or no_hp LIKE '%$search%'");
		   $datacount = $querycount->fetch_array();
           $totalFiltered = $datacount['jumlah'];
        }

        $data = array();
        if(!empty($query))
        {
            $no = $start + 1;
            while ($r = $query->fetch_array())
            {
                $nestedData['no'] = $no;
                $nestedData['nama'] = $r['nama'];
                $nestedData['no_hp'] = $r['no_hp'];
                $nestedData['aksi'] = "<a href='#' class='btn-warning btn-sm'>Ubah</a>&nbsp; <a href='#' class='btn-danger btn-sm'>Hapus</a>";
                $data[] = $nestedData;
                $no++;
            }
        }
          
        $json_data = array(
                    "draw"            => intval($_POST['draw']),  
                    "recordsTotal"    => intval($totalData),  
                    "recordsFiltered" => intval($totalFiltered), 
                    "data"            => $data   
                    );
            
        echo json_encode($json_data); 

}
?>

Dalam pemrosesan sisi server membutuhkan 6 POST request dari datatables:

  1. $_POST[‘length’] : jumlah baris yang ditampilkan.
  2. $_POST[‘start’] : index untuk awal data, baris pertama dimulai dari index 0.
  3. $_POST[‘order’][‘0’][‘column’] : pengurutan berdasarkan kolom yang dipilih.
  4. $_POST[‘order’][‘0’][‘dir’] : pengurutan secara ascending atau descending.
  5. $_POST[‘search’][‘value’] : data pencarian.
  6. $_POST[‘draw’] : Ini digunakan oleh DataTables untuk memastikan bahwa Ajax kembali dari permintaan pemrosesan sisi server. biasanya menggunakan nilai int, seperti 1 yang artinya mengembalikan permintaan.

Berikut Contoh Hasilnya:

Full Source Code : https://github.com/rizalrizal/php-datatable-serverside

Happy Coding 🙂

5 Comments

  1. terima kasih sebelumnya untuk tutorialnya, udah ikut tutorial nya tp masih error : DataTables warning: table id=table – Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1

    itu kenapa ya kak?

Leave a Reply

Your email address will not be published. Required fields are marked *