Cara Membuat DataTables Serverside Join Table dengan PHP MySQL Ajax, Multi Dinamis Atribut

Initekno.com – Melanjutkan artikel tentang datatables seri kedua kemaren. Kali ini saya akan memodifikasi datatablesnya hingga menjadi multi dinamis atribut, Artinya, kamu bisa kapan saja menyembunyikan dan menampilkan atribut dari datatables, Tujuan ini adalah untuk melihat informasi lebih detail sampai kedalam akar data.

Daftar Tutorial DataTables Join Table, Keseluruhan :

Ini sangat bermanfaat, jika tabel yang kamu kelola mempunyai banyak atribut didalamnya. Disini saya hanya menggunakan 3 atribut saja, yaitu kelas, status dan tentor, atribut ini saya ambil dari 3 tabel yang saling berhubungan, tabel itu adalah : tabel status_input, tabel trx_kelas dan tabel trx_monitoring. Untuk lebih jelasnya silahkan baca cara membuat datatables seri pertama di link berikut ini:

Cara Membuat DataTables Server Side dengan PHP, MySQL join Tabel dan Ajax

Baik, tanpa panjang lebar, silahkan buat file baru dan beri nama dengan server_data.php isikan kode seperti berikut ini:

<?php
//ini adalah data server
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "db_mt1webapp";

$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());

$requestData= $_REQUEST;
$columns = array( 
	0 => 'nama_kelas', 
	1 => 'nama_status_input',
	2 => 'code_devisi_tentor'
);

//----------------------------------------------------------------------------------
//join 2 tabel dan bisa lebih, tergantung kebutuhan
$sql = " SELECT trx_kelas.nama_kelas, status_input.nama_status_input, code_devisi_tentor ";
$sql.= " FROM trx_monitoring";
$sql.= " JOIN trx_kelas ON trx_monitoring.trx_id_kelas=trx_kelas.id_kelas";
$sql.= " JOIN status_input ON trx_monitoring.status_monitoring=status_input.id_status_input";

$query=mysqli_query($conn, $sql) or die("data_server.php: get dataku");
$totalData = mysqli_num_rows($query);
$totalFiltered = $totalData;

//----------------------------------------------------------------------------------
$sql = " SELECT trx_kelas.nama_kelas, status_input.nama_status_input, code_devisi_tentor ";
$sql.= " FROM trx_monitoring";
$sql.= " JOIN trx_kelas ON trx_monitoring.trx_id_kelas=trx_kelas.id_kelas";
$sql.= " JOIN status_input ON trx_monitoring.status_monitoring=status_input.id_status_input";
$sql.= " WHERE 1=1";


//----------------------------------------------------------------------------------
$sql = " SELECT trx_kelas.nama_kelas, status_input.nama_status_input, code_devisi_tentor ";
$sql.= " FROM trx_monitoring";
$sql.= " JOIN trx_kelas ON trx_monitoring.trx_id_kelas=trx_kelas.id_kelas";
$sql.= " JOIN status_input ON trx_monitoring.status_monitoring=status_input.id_status_input";
$sql.= " WHERE 1=1";

if( !empty($requestData['search']['value']) ) {
	//----------------------------------------------------------------------------------
	$sql.=" AND ( nama_kelas LIKE '".$requestData['search']['value']."%' ";    
	$sql.=" OR nama_status_input LIKE '".$requestData['search']['value']."%' ";
	$sql.=" OR code_devisi_tentor LIKE '".$requestData['search']['value']."%' )";
}

//----------------------------------------------------------------------------------
$query=mysqli_query($conn, $sql) or die("data_server.php: get dataku");
$totalFiltered = mysqli_num_rows($query);
$sql.=" ORDER BY ". $columns[$requestData['order'][0]['column']]."   ".$requestData['order'][0]['dir']."  LIMIT ".$requestData['start']." ,".$requestData['length']."   ";	
$query=mysqli_query($conn, $sql) or die("data_server.php: get dataku");
	

//----------------------------------------------------------------------------------
$data = array();
while( $row=mysqli_fetch_array($query) ) {
	$nestedData=array(); 
	$nestedData[] = $row["nama_kelas"];
	$nestedData[] = $row["nama_status_input"];
	$nestedData[] = $row["code_devisi_tentor"];
	
	$data[] = $nestedData;
}
//----------------------------------------------------------------------------------
$json_data = array(
	"draw"            => intval( $requestData['draw'] ),  
	"recordsTotal"    => intval( $totalData ), 
	"recordsFiltered" => intval( $totalFiltered ), 
	"data"            => $data );
//----------------------------------------------------------------------------------
echo json_encode($json_data);
?>

<?php

//ini adalah data server

$servername = "localhost";

$username = "root";

$password = "";

$dbname = "db_mt1webapp";

$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());

$requestData= $_REQUEST;

$columns = array(

0 => 'nama_kelas',

1 => 'nama_status_input',

2 => 'code_devisi_tentor'

);

//----------------------------------------------------------------------------------

//join 2 tabel dan bisa lebih, tergantung kebutuhan

$sql = " SELECT trx_kelas.nama_kelas, status_input.nama_status_input, code_devisi_tentor ";

$sql.= " FROM trx_monitoring";

$sql.= " JOIN trx_kelas ON trx_monitoring.trx_id_kelas=trx_kelas.id_kelas";

$sql.= " JOIN status_input ON trx_monitoring.status_monitoring=status_input.id_status_input";

$query=mysqli_query($conn, $sql) or die("data_server.php: get dataku");

$totalData = mysqli_num_rows($query);

$totalFiltered = $totalData;

//----------------------------------------------------------------------------------

$sql = " SELECT trx_kelas.nama_kelas, status_input.nama_status_input, code_devisi_tentor ";

$sql.= " FROM trx_monitoring";

$sql.= " JOIN trx_kelas ON trx_monitoring.trx_id_kelas=trx_kelas.id_kelas";

$sql.= " JOIN status_input ON trx_monitoring.status_monitoring=status_input.id_status_input";

$sql.= " WHERE 1=1";

//----------------------------------------------------------------------------------

$sql = " SELECT trx_kelas.nama_kelas, status_input.nama_status_input, code_devisi_tentor ";

$sql.= " FROM trx_monitoring";

$sql.= " JOIN trx_kelas ON trx_monitoring.trx_id_kelas=trx_kelas.id_kelas";

$sql.= " JOIN status_input ON trx_monitoring.status_monitoring=status_input.id_status_input";

$sql.= " WHERE 1=1";

if( !empty($requestData['search']['value']) ) {

//----------------------------------------------------------------------------------

$sql.=" AND ( nama_kelas LIKE '".$requestData['search']['value']."%' ";

$sql.=" OR nama_status_input LIKE '".$requestData['search']['value']."%' ";

$sql.=" OR code_devisi_tentor LIKE '".$requestData['search']['value']."%' )";

}

//----------------------------------------------------------------------------------

$query=mysqli_query($conn, $sql) or die("data_server.php: get dataku");

$totalFiltered = mysqli_num_rows($query);

$sql.=" ORDER BY ". $columns[$requestData['order'][0]['column']]." ".$requestData['order'][0]['dir']." LIMIT ".$requestData['start']." ,".$requestData['length']." ";

$query=mysqli_query($conn, $sql) or die("data_server.php: get dataku");

//----------------------------------------------------------------------------------

$data = array();

while( $row=mysqli_fetch_array($query) ) {

$nestedData=array();

$nestedData[] = $row["nama_kelas"];

$nestedData[] = $row["nama_status_input"];

$nestedData[] = $row["code_devisi_tentor"];

$data[] = $nestedData;

}

//----------------------------------------------------------------------------------

$json_data = array(

"draw" => intval( $requestData['draw'] ),

"recordsTotal" => intval( $totalData ),

"recordsFiltered" => intval( $totalFiltered ),

"data" => $data );

//----------------------------------------------------------------------------------

echo json_encode($json_data);

Perlu diketahui, bahwa kode pada data_server.php ini saya gunakan ditutorial sebelumnya, jadi komponennya sama saja. jika kamu sudah mengikuti artikel sebelumnya, maka langkah ini sebaiknya kamu lewatkan saja. Tetapi jika kamu belum membaca artikel sebelumnya, maka ini adalah modal utama untuk menghubungkan datatables dengan data mysql, karena didalamnya terdapat kode untuk terhubung ke mysql dan query join table.

Kemudian buat lagi file baru, dan berinama dengan index.php, tulis kode berikut ini:

<!DOCTYPE html>
<html>
	<title>Initekno Demo - Datatables Kolom Jarak Pandang</title>
	<head>
		<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
		<link rel="stylesheet" type="text/css" href="css/dataTables.colVis.css">
		
		<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
		<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
		<script type="text/javascript" language="javascript" src="js/dataTables.colVis.js"></script>
		
		<!--google font-->
	<link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">
	
		<script type="text/javascript" language="javascript" >
			$(document).ready(function() {
			   var dataTable =  $('#dataku').DataTable( {
			   	processing: true,
				serverSide: true,
				ajax: "data_server.php",
			
			    } );
			   var colvis = new $.fn.dataTable.ColVis( dataTable, {
					buttonText: '<img src="images/down.gif" >',
					activate: 'mouseover',
					exclude: [ 0 ]	
    			   } );
			   $( colvis.button() ).prependTo('th:nth-child(1)');
		    
			} );
		</script>
		<style>
		body {
			/*font google*/
			font-family: 'Rubik', sans-serif;

		}
			div.container {
			    max-width: 980px;
			    margin: 0 auto;
			}
			div.header {
			    margin: 0 auto;
			    max-width:980px;
			}
			body {
			    background: #f7f7f7;
			    color: #333;
			}
			
		</style>
		
	</head>
	<body>
		<div class="header"><h1>Initekno - Datatables Kolom Jarak Pandang</h1></div>
		<div class="container">
			<table id="dataku"  class="display" cellspacing="0" width="100%">
				<thead>
					<tr>
						<th>Kelas</th>
						<th>Status</th>
						<th>Tentor</th>
					</tr>
				</thead>
			</table>
		</div>
	</body>
</html>

<!DOCTYPE html>

<html>

<title>Initekno Demo - Datatables Kolom Jarak Pandang</title>

<head>

$(document).ready(function() {

var dataTable = $('#dataku').DataTable( {

processing: true,

serverSide: true,

ajax: "data_server.php",

} );

var colvis = new $.fn.dataTable.ColVis( dataTable, {

buttonText: '<img src="images/down.gif" >',

activate: 'mouseover',

exclude: [ 0 ]

} );

$( colvis.button() ).prependTo('th:nth-child(1)');

} );

</script>

<style>

body {

/*font google*/

font-family: 'Rubik', sans-serif;

}

div.container {

max-width: 980px;

margin: 0 auto;

}

div.header {

margin: 0 auto;

max-width:980px;

}

body {

background: #f7f7f7;

color: #333;

}

</style>

</head>

<body>

<div class="header"><h1>Initekno - Datatables Kolom Jarak Pandang</h1></div>

<thead>

<tr>

<th>Kelas</th>

<th>Status</th>

<th>Tentor</th>

</tr>

</thead>

</table>

</div>

</body>

</html>

Sekarang coba jalankan pada browser dengan cara ketik localhost/coba_datatables/index.php maka kamu akan mendapati datatables yang begitu cantik disana. Oiya kode index.php sebenarnya kurang lebih sama dengan artikel sebelumnya cuman yang membedakan adalah pada kode javascriptnya saja, dimana ini yang membuat datatables bisa dimodifikasi semau kita

		<script type="text/javascript" language="javascript" >
			$(document).ready(function() {
			   var dataTable =  $('#dataku').DataTable( {
			   	processing: true,
				serverSide: true,
				ajax: "data_server.php",
			
			    } );
			   var colvis = new $.fn.dataTable.ColVis( dataTable, {
					buttonText: '<img src="images/down.gif" >',
					activate: 'mouseover',
					exclude: [ 0 ]	
    			   } );
			   $( colvis.button() ).prependTo('th:nth-child(1)');
		    
			} );
		</script>

$(document).ready(function() {

var dataTable = $('#dataku').DataTable( {

processing: true,

serverSide: true,

ajax: "data_server.php",

} );

var colvis = new $.fn.dataTable.ColVis( dataTable, {

buttonText: '<img src="images/down.gif" >',

activate: 'mouseover',

exclude: [ 0 ]

} );

$( colvis.button() ).prependTo('th:nth-child(1)');

} );

</script>

Sekian, tutorial ini, silahkan dipraktekkan. Dan pastikan komputer kamu terkoneksi internet, karena ada beberapa kode external yang langsung melakukan download kode secara online.

<!--google font-->
	<link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">

1 2	<!--google font--> <link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">

Selebihnya offline, dan kamu hanya tinggal mendownload komponen itu di link berikut ini:

DEMO|DOWNLOAD

Laman

Cara Membuat DataTables Serverside Join Table dengan PHP MySQL Ajax, Multi Dinamis Atribut

Daftar Tutorial DataTables Join Table, Keseluruhan :

Leave a Reply Cancel

Laman

Cara Membuat DataTables Serverside Join Table dengan PHP MySQL Ajax, Multi Dinamis Atribut

Daftar Tutorial DataTables Join Table, Keseluruhan :

Related Posts

Tutorial Membuat Dropdown Bertingkat 3 Dengan PHP Object dan MySQL

Membuat Sistem Informasi Akademik Kampus #Bagian 2 Konfigurasi Codeigniter

Seri 4# Sistem Templating Layout Dengan Modular HMVC Pada Codeigniter 3 Bagian 2

Leave a Reply Cancel