PHP Datatables Serverside

 Oke langsung saja, Pertama kita siapkan file library jquery, datatables, dan bootstrap dari CDN.

?
+ Klik di sini untuk lihat kode / look at the code
001
002
003
004
005
006
007
008
<!--  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.

?
+ Klik di sini untuk lihat kode / look at the code
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
<!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.

?
+ Klik di sini untuk lihat kode / look at the code
001
002
003
004
005
006
007
008
009
010
011
<?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.

?
+ Klik di sini untuk lihat kode / look at the code
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
<?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:

Sumber: https://belajaraplikasi.com/membuat-datatables-server-side-processing-dengan-php-mysql/

Artikel Terbaru