jQuery Bootgrid - Alternatif lain dari Datatables

jQuery Bootgrid - Alternatif lain dari Datatables. Hai sobat tutorialweb, setelah libur panjang lebaran akhirnya saya bisa eksis kembali di tutorialweb.net ini, semoga sobat semua gak bosen untuk ngunjungi blog saya yang satu ini. Oke sob kemarin saya browsing-browsing di google tentang Grid jQuery untuk menampilkan data di dari database MySQL, memang banyak banget referensinya tentang hal tersebut, tapi sejauh yang saya ketahui yang paling bagus adalah menggunakan Datatables. Tapi akhirnya saya menemukan satu jQuery Grid yang lumayan oke sob, namanya adalah Bootgrid. Nah Bootgrid ini sangat mudah sekali digunakan baik itu untuk langsung konversi table kedalam tampilan Bootgrid atau menggunakan Serverside-nya, yang enaknya sob kalau di bandingkan dengan Datatables yaitu pada bagian serverside-nya, menurut saya tidak segitu ribet kayak di Datatables (gak tahu sobat ribet gak :). ). Nah dari pada bingung apa itu Bootgrid dan dari pada saya kebanyakan intro didepan kayak gini, mending langsung saja ya sob ke implementasiannya.

Untuk impletentasi yang pertama ini kita buat yang konversi aja sob, yang serverside nunggu tutorial berikutnya. Jadi tutorial ini hanya mengkonversi grid sobat yang asalhnya hanya table biasa yang menampilkan data dari MySQL menjadi tampilan Bootgrid dengan responsive, paging, sorting, searching, dan lainnya 🙂

Karena ini hanya konversi jadi gak butuh buat database atau table baru, kita pakai aja database yang sudah ada yaitu database mysql, di dalamnya ada table dengan nama help_keyword, dengan kolom help_keyword_id dan name. Lihat gambar dibawah ini kalau masih bingung.

Nah itu table yang kita pakai.

Sebelumnya untuk CSS dan JS pada tutorial ini saya pakai CDN ya, berarti harus online untuk bisa menjalankannya dengan baik.

Berikut ini script nya, silahkan kopas aja biar gak bingung 🙂

<html>
<head>
	<title>jQuery Bootgrid</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.css">
</head>
<body>
	<div class="container">
		<h1>MySQL Data</h1>
		<table id="grid-basic" class="table table-condensed table-hover table-striped">
			<thead>
				<tr>
					<th data-column-id="help_keyword_id" data-type="numeric" data-order="asc">ID</th>
					<th data-column-id="name">NAME</th>
					<th data-column-id="link" data-formatter="link">ACT</th>
				</tr>
			</thead>
			<tbody>
				<?php
				$conn = new mysqli("localhost", "root", "", "mysql");
				if ($conn->connect_errno) {
					echo die("Failed to connect to MySQL: " . $conn->connect_error);
				}
				$sql = $conn->query("SELECT * FROM help_keyword") or die($conn->error);
				if($sql->num_rows){
					while($row = $sql->fetch_assoc()){
						echo '
						<tr>
							<td>'.$row['help_keyword_id'].'</td>
							<td>'.$row['name'].'</td>
							<td></td>
						</tr>
						';
					}
				}
				?>
			</tbody>
		</table>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.js"></script>
	<script>
		$( document ).ready(function() {
			$("#grid-basic").bootgrid({
				formatters: {
					"link": function(column, row)
					{
						return "<a href=edit.php?id=" + row.help_keyword_id + ">Edit</a> - <a href=delete.php?id=" + row.help_keyword_id + ">Delete</a>";
					}
				}
			});
		});
	</script>
</body>
</html>

<html>

<head>

<title>jQuery Bootgrid</title>

</head>

<body>

<h1>MySQL Data</h1>

<thead>

<tr>

</tr>

</thead>

<tbody>

<?php

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

if ($conn->connect_errno) {

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

}

$sql = $conn->query("SELECT * FROM help_keyword") or die($conn->error);

if($sql->num_rows){

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

echo '

<tr>

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

</tr>

}

</tbody>

</table>

</div>

$( document ).ready(function() {

$("#grid-basic").bootgrid({

formatters: {

"link": function(column, row)

{

return "<a href=edit.php?id=" + row.help_keyword_id + ">Edit</a> - <a href=delete.php?id=" + row.help_keyword_id + ">Delete</a>";

}

});

</script>

</body>

</html>

Yuk sob saya jelaskan baris kode yang penting-penting saja:

Baris 4 : CSS untuk bootstrap
Baris 5 : CSS untuk Bootgrid
Baris 13,14,15 : <th> heading untuk table, dilihat pada data-column-id ini di isi nama kolom dari table mysql. Dan heading ke 3 ada atribut data-column-id=“link” data-formatter=“link” ini formater untuk Linknya. Ada di javascript di bawah
Baris 21 - 24 : Koneksi ke database, jangan lupa rubah dengan koneksi yang anda gunakan
Baris 26 : Query ke database SELECT * FROM help_keyword
Baris 27 : Cek apakah ada data di table help_keyword
Baris 28 - 36 : Perulangan while untuk menampilkan data ya, kayak seperti biasa ya.
Baris 33 : <td></td> di kosongi karena nanti di isi link dari script javascript di bawah
Baris 43 : JS jQuery
Baris 44 : JS bootstrap
Baris 45 : JS bootgrid
Baris 46 - 57 : Javascript untuk memasukkan link pada baris ke 33
Baris 50 : “link” adalah atribut yang dimasukkan di heading ke 3 -> data-formatter=”link”
Baris 52 : Teks / html link yang dimasukkan. row.help_keyword_id berarti memasukkan data dari database help_keyword_id