Cara Sorting Data Menggunakan PHP & MySQL Pada Datatables

Hai, balik lagi ditutorial pemrograman web Dumet School kali ini saya ingin menjelaskan tentang Bagaimana Cara Sorting Data Menggunakan PHP & MySQL Pada Datatables, pada kasus ini kita akan membuat sorting data, pagination menggunakan plugin dari datatables

cara nya sangat mudah, namanya juga plugin yah pasti sudah dibuatkan dengan developernya jadi kita tinggal menggunakan dan mengikuti rules-rules dari si plugin tersebut, ada beberapa hal yang harus dipersiapkan untuk memulainya, yang pertama teman teman pastikan sudah mengerti tentang cara mengoding html, integrasi bootstrap karena kita akan menggunakan bootstrap 4 untuk templatenya, dan pastikan teman teman terhubung dengan internet karena kita akan menggunakan cdn pada file file tersebut, agar lebih simple saja kita menggunakan cdn, sebenarnya bisa saja menggunakan offline tapi karena lebih enak yang simple kita akan buat yang simple-simple, oke oh iya pastikan juga teman teman sudah membuat database dan table beserta isinya yah pastikan isinya lebih dari 25 yah, jika sudah, seperti bisa buatkan koneksi ke databasenya yang kita beri nama.
Config.php

<?php 
	
	$con = mysqli_connect('localhost','dumet','xxxx','webmaster');

	if (!$con){
		die ("Databases Tidat tersedia" . mysqli_connect_error());
	}


 ?>

<?php

$con = mysqli_connect('localhost','dumet','xxxx','webmaster');

if (!$con){

die ("Databases Tidat tersedia" . mysqli_connect_error());

}

Lalu buat tampilan untuk menampilkan datanya beri nama datatables.php

<?php 
    include('config.php');

    $SQL = mysqli_query($con, "SELECT * FROM faker_users ORDER BY id DESC");
?>
<!DOCTYPE html>
<html>
	<head>
		<title>Demo with jQuery</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	    <meta name="description" content="Demo project with jQuery">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
		<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css">
		<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
	</head>
	<body>
		<table id="example" class="table table-striped table-bordered" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th>Username</th>
                <th>CITY</th>
                <th>EMAIL</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Username</th>
                <th>CITY</th>
                <th>EMAIL</th>
            </tr>
        </tfoot>
        <tbody>
            <?php while($data = mysqli_fetch_array($SQL)){ ?>
                <tr>
                    <td><?= $data['username'] ?></td>
                    <td><?= $data['city'] ?></td>
                    <td><?= $data['email'] ?></td>
                </tr>
            <?php } ?>
        </tbody>
    </table>
		<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
		<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
		<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
			    $('#example').DataTable();
			} );
		</script>
	</body>
</html>

<?php

include('config.php');

$SQL = mysqli_query($con, "SELECT * FROM faker_users ORDER BY id DESC");

<!DOCTYPE html>

<html>

<head>

<title>Demo with jQuery</title>

</head>

<body>

<thead>

<tr>

<th>Username</th>

<th>EMAIL</th>

</tr>

</thead>

<tfoot>

<tr>

<th>Username</th>

<th>EMAIL</th>

</tr>

</tfoot>

<tbody>

<?php while($data = mysqli_fetch_array($SQL)){ ?>

<tr>

</tr>

<?php } ?>

</tbody>

</table>

$(document).ready(function() {

$('#example').DataTable();

} );

</script>

</body>

</html>

Jika sudah disave di dalam folder xampp/htdocs yah dan buat folder baru oke jika sudah, maka hasilnya seperti ini.

Oke cukup mudah bukan?, sekian tutorial tentang Bagaimana Cara Sorting Data Menggunakan PHP & MySQL Pada Datatables. Sampai bertemu diartikel selanjutnya dan sampai jumpa.

Â #KeepLearn

#IsmetMA

Cara Sorting Data Menggunakan PHP & MySQL Pada Datatables

Facebook DUMET School

Konsultasi Gratis

Categories