DataTables / jQuery / Lain-Lain / MySQL / MySQLi / PHP
4

Cara Mudah Menampilkan Data MySQL dengan DataTables

oleh pino · Maret 10, 2016

4.50 avg. rating (89% score) - 2 votes

Cara Mudah Menampilkan Data MySQL dengan DataTables. Hai temen-temen sekalian, maaf banget ya karena update tutorialnya sangat-sangat lambat, karena masih banyak kesibukan . Di waktu senggang ini tutorialweb.net akan mencoba membuat sebuah tutorial sederhana tapi ini akan sangat-sangat bermanfaat bagi temen-temen semua (ngarep banget ini, hehehe). Temen-temen pasti pernah kan menampilkan data dari database MySQL tentunya di tampilkan dalam bentuk tabel seperti pada tutorial sebelumnya. Nah table itu kalau sudah banyak data (ratusan bahwan ribuan) maka tampilannya akan tidak indah dipandang mata karena data banyak turrrrruuuuunn kebawah sampai ratusan bahkan ribuan, jalannya adalah dengan menambahkan script pagination (halaman) pada halaman web sobat, cukup ribet pulan menambahkannya kan, seperti pada tutorial sebelumnya juga ada tentang membuat Simple pagination. Tapi sobat tenang aja, sekarang sudah ada yang namanya DataTables yang dapat sangat-sangat memudahkan pekerjaan sobat dalam hal menampilkan data dari database MySQL.

Beberapa fitur DataTables adalah bisa merubah langsung data sobat yang asalnya Table biasa bisa menjadi Table yang sudah ada pagination, sudah ada pencarian data, dan juga ada pilihan mau berapa banyak data yang di tampilkan perhalamannya. Mantaf bukan, tanpa perlu ribet paket script pagination atau pencarian sudah langsung bisa di gunakan.

Halah sudah lah basa basinya (biasanya gak pernah panjang gini), kita langsung aja ya tutorialnya…. cekidot…

Oke, pertama silahkan mampir ke website http://datatables.net untuk lihat-lihat.

Yang kedua kita butuh database dan yang terisi banyak data agar nanti bisa terlihat gimana datatables ini bekerja, karena butuh banyak data maka saya gunakan aja database yang sudah ada di phpMyAdmin, yaitu database mysql, dan table yang saya gunakan adalah table help_keyword, di situ sudah ada ratusan data yang masuk.

Ketiga dalam file kita nanti akan di Inlcude-kan 3 buah file, yaitu 2 file dari DataTables (css dan js) dan 1 file jquery (js), ini kita langsug ambil dari websitenya aja (cdn), berikut ini linknya:

//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css
//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js
http://code.jquery.com/jquery-1.12.0.min.js

//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css

//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js

http://code.jquery.com/jquery-1.12.0.min.js

Oke link sumber sudah ada, tinggal kita proses pembuatannya, silahkan buat file dengan nama index.php kemudian ketikkan (copy paste aja deh) kode di bawah ini:

<!DOCTYPE html>
<html>
<head>
	<title>Simple DataTables</title>
	<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
</head>
<body>
	<h1>Data Datatables</h1>
	<table id="dataTables" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>NO.</th>
                <th>ID</th>
                <th>NAME</th>
                <th>OPTION 1</th>
                <th>OPTION 2</th>
                <th>OPTION 3</th>
                <th>OPTION 4</th>
            </tr>
        </thead>
		<tbody>
			<?php
			$conn = new mysqli("localhost", "root", "", "mysql");
			if ($conn->connect_errno) {
				echo "Failed to connect to MySQL: " . $conn->connect_error;
			}
			$no = 1;
			$res = $conn->query("SELECT * FROM help_keyword");
			while($row = $res->fetch_assoc()){
				echo '
				<tr>
					<td>'.$no.'</td>
					<td>'.$row['help_keyword_id'].'</td>
					<td>'.$row['name'].'</td>
					<td>Hanya Pilihan '.$no.'</td>
					<td>Hanya Pilihan '.$no.'</td>
					<td>Hanya Pilihan '.$no.'</td>
					<td>Hanya Pilihan '.$no.'</td>
				</tr>
				';
				$no++;
			}
			?>
		</tbody>
		<tfoot>
            <tr>
                <th>NO.</th>
                <th>ID</th>
                <th>NAME</th>
                <th>OPTION 1</th>
                <th>OPTION 2</th>
                <th>OPTION 3</th>
                <th>OPTION 4</th>
            </tr>
        </tfoot>
	</table>
	<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
	<script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
	<script>
	$(document).ready(function() {
		$('#dataTables').DataTable();
	} );
	</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Simple DataTables</title>

</head>

<body>

<h1>Data Datatables</h1>

<thead>

<tr>

<th>OPTION 1</th>

<th>OPTION 2</th>

<th>OPTION 3</th>

<th>OPTION 4</th>

</tr>

</thead>

<tbody>

<?php

$conn = new mysqli("localhost", "root", "", "mysql");

if ($conn->connect_errno) {

echo "Failed to connect to MySQL: " . $conn->connect_error;

}

$no = 1;

$res = $conn->query("SELECT * FROM help_keyword");

while($row = $res->fetch_assoc()){

echo '

<tr>

<td>'.$row['help_keyword_id'].'</td>

<td>Hanya Pilihan '.$no.'</td>

</tr>

$no++;

}

</tbody>

<tfoot>

<tr>

<th>OPTION 1</th>

<th>OPTION 2</th>

<th>OPTION 3</th>

<th>OPTION 4</th>

</tr>

</tfoot>

</table>

$(document).ready(function() {

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

} );

</script>

</body>

</html>

Nah, sudah selesai. Silahkan di buka di browser sobat. Pastikan pakek Localhost dan terkoneksi internet ya. Kalau sudah kayak gambar di bawah ini berarti sudah berhasil, lihat sudah ada pagination dan pencarian dengan jQuery kan.

Waah,,, mantap ya.. oh ya untuk kolom OPTION 1 sampek OPTION 4 itu bukan dari database ya, itu saya masukkan untuk pelengkap aja, kan gak enak kalau cuma 2 kolom aja yang masuk, gak enak di pandang mata..

Nah loo.. cuma itu ni gak di jelasin tentang script di atas..

Hahahahaa… oke deh di jelasin sedikit ya, hanya itinya aja…

Baris ke 5, 61, 62 : ini adalah include script dari DataTables dan jQuery nya langsung, jadi harus terkoneksi internet ya.
Baris ke 64-66 : adalah script yang digunakan untuk mengkonversi table biasa kita menjadi table DataTables jQuery kayak gambar di atas, nah cara rubahnya gimana? Perhatikan baris ke 65, ada script #dataTables dan baris ke 10 ada script id=“dataTables”, maksudnya dimana setiap ada Table diberi id dataTables, maka akan secara otomatis di konversi manjadi tampilan DataTables jQuery.
Baris 24-46 : Scrip perulangan sederhana untuk menampilkan data dari database, ini sudah ada di setiap tutorial, jadi gak usah dijelaskan lebih detail.

Sudah ada pencerahan sobat? mudah-mudahan bisa membantu, terima kasih sudah berkunjung dan jangan lupa klik iklannya ya.. hehehe (ngarep bingits). Sampai jumpa.

Kalau pengen mudah, dan bisa dicoba offline (tanpa internet) bisa di download di bawah ini.

Download

Password:

rini berkata:

April 27, 2023 pukul 2:26 pm

siang gan, makasih tutorialnya sngat membantu. oh iya aku udah coba dan bisa tapi gimna cara setting jumlah rownya biar pas pertama kali halamannya di load itu datanya cuma 10 baris. soalnya aku punya datanya itu 20rb row n tiap halamannya barudibuka 20rbnya yng ditampilin dluan pas udah nunggu bru deh bisa di sortir. mohon pencerahannya gan

Balas
- pino berkata:
  
  April 29, 2023 pukul 6:33 pm
  
  Balas
Fika berkata:

Oktober 27, 2016 pukul 1:21 pm

Misi gan, mau nanya kenapa ya saya ko searching, showing, filternya ga jalan? itu kenapaa ya padahal udh sesuai.

Balas
- pino berkata:
  
  November 5, 2022 pukul 9:13 am
  
  apa yg lain fungsi, kayak paging?
  
  Balas