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> <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:
- $_POST[‘length’] : jumlah baris yang ditampilkan.
- $_POST[‘start’] : index untuk awal data, baris pertama dimulai dari index 0.
- $_POST[‘order’][‘0’][‘column’] : pengurutan berdasarkan kolom yang dipilih.
- $_POST[‘order’][‘0’][‘dir’] : pengurutan secara ascending atau descending.
- $_POST[‘search’][‘value’] : data pencarian.
- $_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 🙂
Seorang pemuda muslim kelahiran bandung namun keturunan minang, bekerja sebagai kuli IT di PT. Durio Indigo dan pernah mencicipi pendidikan tinggi S1 Informatika Universitas Amikom Yogyakarta.
Saya pakai database MongoDB dan it works! tinggal sesuaikan saja.
Terimakasih
Works!
Tapi untuk sort by angka atau tanggal saya masih mengalami kegagalan, menggunakan database mysql mohon pencerahannya
mungkin bisa di convert ke text dulu type data yg int atau date
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?
mantap mas,, semoga ilmunya berkah..