DataTables Server-side Processing menggunakan PHP dengan MySQL

1 1,282

DataTables adalah library jQuery yang digunakan untuk menampilkan daftar record dalam tabel HTML dengan interface yang intuitif. Ini mencakup fitur seperti pencarian, pagination, sort, filter dan lainnya. Dalam artikel sebelumnya, kita telah melihat kode kustom untuk pencarian dan pagination untuk daftar record. Dengan menggunakan DataTables kita dapat membatasi jumlah record yang akan ditampilkan per halaman.

Ekstensi DataTables menyediakan pemrosesan sisi klien dan server-side. Pada artikel ini, kita akan menampilkan hasil database dengan menggunakan pengolahan sisi server DataTables. File PHP memanggil fungsi kelas domain dengan mengirimkan tabel database, kolom dan rincian konfigurasi. Kelas domain mengeksekusi query untuk membaca kolom yang diminta dan mengembalikan array hasil. Array resultan ini dikodekan ke format JSON yang akan mengirimkan respon dari script DataTables AJAX.

Kode HTML DataTable

Kode berikut menunjukkan kode HTML untuk DataTable. Kode ini berisi library CSS dan JavaScript yang diperlukan termasuk di bagian Head. Saya telah menambahkan gaya untuk menyesuaikan UI DataTable dengan mengesampingkan gaya perpustakaan. Tag tabel HTML memiliki atribut id yang digunakan untuk menginisialisasi tabel sebagai DataTable.

<html>
	<head>
	<title>Datatables</title>
		<link rel="stylesheet"  href="vendor/DataTables/datatables.min.css">	
		<link rel="stylesheet"  href="style.css">	
		<script src="vendor/jquery/jquery-1.11.2.min.js" type="text/javascript"></script>
		<script src="vendor/DataTables/datatables.min.js" type="text/javascript"></script> 	
		<style>
		body {font-family: calibri;color:#4e7480;}
		</style>
	</head>
	<body>
	<div class="container">
		<table id="contact-detail" class="display nowrap" cellspacing="0" width="100%">
		<thead>
			<tr>
			<th>First Name</th>
			<th>Last Name</th>
			<th>Address</th>
			<th>Phone</th>
			<th>DOB</th>
			</tr>
		</thead>
		</table>
		</div>
	</body>
</html>

Inisialisasi DataTable menggunakan jQuery

Kode berikut menunjukkan inisialisasi DataTable jQuery dengan mengatur properti DataTable yang dibutuhkan. Dalam kode ini, properti serverSide disetel sebagai true dan jalur file sisi server ditentukan untuk properti ajax. Kedua hal ini digunakan untuk mengaktifkan pemrosesan sisi server untuk DataTable.

Baca Juga :  Membuat Shopping Cart Dengan Multi-Tab Wizard Menggunakan jQuery AJAX
<script>
$(document).ready(function() {
    $('#contact-detail').dataTable({
		"scrollX": true,
		"pagingType": "numbers",
        "processing": true,
        "serverSide": true,
        "ajax": "server.php"
    } );
} );
</script>

Pengolahan Sisi Server

Kode PHP berikut diadaptasi dari contoh yang diberikan di situs resmi DataTable. Ini menyatakan rincian konfigurasi database, nama tabel, kolom dan mengirim kemudian ke kelas domain untuk memproses query SELECT.

<?php
$table = 'tbl_contact';
 
$primaryKey = 'id';
 
$columns = array(
    array( 'db' => 'first_name', 'dt' => 0 ),
    array( 'db' => 'last_name',  'dt' => 1 ),
    array( 'db' => 'address',   'dt' => 2 ),
    array( 'db' => 'phone', 'dt' => 3,),
    array( 'db' => 'date_of_birth','dt' => 4,
        'formatter' => function( $d, $row ) {
            return date( 'd-m-Y', strtotime($d));
        }
    )
   
);
 
$sql_details = array(
    'user' => 'root',
    'pass' => '',
    'db'   => 'blog_samples',
    'host' => 'localhost'
);
 
 
require( 'vendor/datatables/ssp.class.php' );
 
echo json_encode(
    SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);
?>

Get real time updates directly on you device, subscribe now.

1 Comment
  1. Zulfikar says

    kak ga bisa di download

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.