Cara Menggunakan JQuery DataTables Pada Website PHP MySQL - Jquery Datatables adalah sebuah software yang dibuat dengan menggunakan jquery untuk menampilkan data menggunakan table yang menggunakan fitur search, sort dan paging.
 |
| Contoh Datatable PHP MySQL |
Dengan menggunakan jquery datatables anda dapat menampilkan data dari database mysql menggunakan bahasa pemrograman php dan kemudian jquery datatable akan menampilkannya lengkap dengan fitur search atau pencarian, sort atau pengurutan dan paging atau berhalaman. Jadi jika anda menampilkan data dari database mysql anda tidak perlu lagi membuat kode program php untuk melakukan paging, search dan sort. Anda cukup menampilkan seluruh data menggunakan jquery datatables.
Pada kali ini kita akan menggunakan jquery datatables dari metro ui css framework. Dapat anda lihat pada websitenya disini "https://metroui.org.ua/datatables.html". Kita mulai saja bagaimana cara menggunakan jquery datatables pada web php dan mysql. Pada tahap pertama kita harus membuat sebuah database dan table serta beberapa field. Berikut ini adalah detail dari table yang akan kita buat.
Nama Database : DB_Kepegawaian
Nama Table : Pegawai
| Nama Field | Tipe Data | Panjang Karakter |
|---|---|---|
| NIP | Varchar | 10 |
| Nama | Varchar | 200 |
| Jenkel | Varchar | 15 |
Kemudian insert atau tambahkan beberapa data kedalam tabel tersebut minimal 10 silahkan anda buat sendiri, tidak usah saya kasih contoh, biar kalian pandai (hehehe). Setelah selesai menginputkan data kedalam tabel tersebut silahkan buat sebuah folder pada htdocs anda dengan nama "phpmysqldatatable". Silahkan download file yang dibutuhkan untuk jquery datatables disini.
Setelah selesai anda download silahkan anda pindahkan file yang sudah anda download tadi ke folder "phpmysqldatatable" setelah dipindahkan silahkan extract file tersebut dengan cara klik kanan kemudian pilih extract here.
Pada folder "phpmysqldatatable" buat sebuah file dengan nama "index.php" kemudian copy kode php berikut ini ke dalam file tersebut,
<?php
mysql_connect("localhost","root","");
mysql_select_db("db_kepegawaian");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery Datatable by Itsiantar</title>
<!-- Bootstrap 3.3.4 -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="datatables/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body class="skin-blue sidebar-mini">
<div class="box">
<div class="box-header">
<h3 class="box-title">Data Table By Itsiantar</h3>
</div><!-- /.box-header -->
<div class="box-body">
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>NIP</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
</tr>
</thead>
<tbody>
<?php
$exec=mysql_query("select * from pegawai");
while($r=mysql_fetch_array($exec)){
?>
<tr>
<td><?php echo $r[0] ?></td>
<td><?php echo $r[1] ?></td>
<td><?php echo $r[2] ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div><!-- /.box-body -->
</div>
<!-- jQuery 2.1.4 -->
<script src="jQuery/jQuery-2.1.4.min.js"></script>
<!-- Bootstrap 3.3.2 JS -->
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- DATA TABES SCRIPT -->
<script src="datatables/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="plugins/datatables/dataTables.bootstrap.min.js" type="text/javascript"></script>
<!-- SlimScroll -->
<!-- page script -->
<script type="text/javascript">
$(function () {
$("#example1").dataTable();
$('#example2').dataTable({
"bPaginate": true,
"bLengthChange": false,
"bFilter": false,
"bSort": true,
"bInfo": true,
"bAutoWidth": false
});
});
</script>
</body>
</html>
Setelah anda copy kode diatas ke file index.php silahkan anda buka pada browser anda. Dan silahkan anda pakai sesuai dengan keperluan anda. Menarik bukan?
EmoticonEmoticon