Menampilkan data serverside dengan datatable dan php mysql

Membuat data json

Untuk menggunakan datatable serverside maka kita harus membuat data dari query mysql di php di encode menjadi json nah untuk mempersingkat waktu kita menggunakan template dari tutorial sebelumnya di sini Menampilkan data Mysql Dengan PHP dan Datatables, kemudian kita buat sebuah file dengan nama data_json.php yang kodenya seperti di bawah ini :

<?php 
	include 'koneksi.php';
	$query = $db->query("SELECT * FROM user");
	while($list = $query->fetch_array()){
        $row    = array();
        $output = array();
        $row[]  = $list['id'];
        $row[]  = $list['username'];
        $row[]  = $list['password'];
        $data[] = $row;
        $output = array("data"=>$data);
	}

    echo json_encode($output);
?>

kemudian rubah kode javascript di bagian footer menjadi seperti di bawah ini :

<script type="text/javascript" language="javascript" >
		 $(document).ready(function() {
			    $('#myTable').DataTable( {
			        "processing": true,
			        "serverSide": true,
			        "ajax": "data_json.php",
			    } );
			} );
		 </script>

Sehingga keseluruhan skrip akan seperti kode dibawah ini :

<?php
ob_start();
session_start(); //aktifkan pemeriksaan session 
if (empty($_SESSION['username'])) { 
	//cek apakah user yang mengakses halaman ini sudah mendapatkan session pengenal sewaktu login
	header('location:login.php'); //jika tidak, arahkan untuk login
}
?>
<!DOCTYPE html>
<html lang="id">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Administrator</title>
		<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
		<link href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">

	</head>
	<body>
		<div class="container">
			<nav class="navbar navbar-default" role="navigation">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="#">Home</a>
				</div>
			
				<div class="collapse navbar-collapse navbar-ex1-collapse">
					<ul class="nav navbar-nav navbar-right">
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">Action <b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="#">Profil</a></li>
								<li><a href="logout.php">Logout</a></li>
							</ul>
						</li>
					</ul>
				</div><!-- /.navbar-collapse -->
			</nav>
			<div class="panel panel-primary">
				  <div class="panel-heading">
						<h3 class="panel-title">Administrator Panel</h3>
				  </div>
				  <div class="panel-body">
				  		<!-- jika session pengenal ada tampilkan -->
						Selamat Datang <?php echo $_SESSION['username']; ?><hr>
						<table id="myTable" class="display" style="width:100%">
					        <thead>
					            <tr>
					                <th>No</th>
					                <th>Username</th>
					                <th>Password</th>
					            </tr>
					        </thead>
					        <tbody>
					           
					        </tbody>
					    </table>
				  </div>
			</div>
		</div>
		
		<!-- jQuery -->
		<script src="//code.jquery.com/jquery.js"></script>
		<script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
		<!-- Bootstrap JavaScript -->
		<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
		<script type="text/javascript" language="javascript" >
		 $(document).ready(function() {
			    $('#myTable').DataTable( {
			        "processing": true,
			        "serverSide": true,
			        "ajax": "data_json.php",
			    } );
			} );
		 </script>
	</body>
</html>

2.Download Source Code

Jika masih terdapat kesalahan, kamu bisa download kode dibawah ini untuk mencocokkan kode dengan kodingan kamu

Baca Juga :   Membuat Laporan Excel Dengan PHP
download

Nah demikianlah tutorial datatable serverside dengan php mysql jika ada yang perlu ditanyakan jangan sungkan sungkan mengisi kolom komentar

Leave a Reply

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