DataTables adalah library Javascript yang dapat dipergunakan untuk mempercantik tampilan tabel di suatu halaman web.
Sebagai contoh, berikut ini adalah sebuah file php yang menampilkan data record-record dari suatu table di database mysql tanpa menggunakan library DataTables.
Data yang ditampilkan pada contoh di atas diambil dari database
information_schema di tabel
USER_PRIVILEGES, source codenya adalah sebagai berikut ini
file grid_plain.php
<html>
<head>
<title>Coba DataTable</title>
</head>
<body>
<?php
$con=mysqli_connect("localhost","root","","information_schema");
// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM USER_PRIVILEGES");
?>
<table border="1">
<thead>
<tr>
<th>GRANTEE</th>
<th>TABLE_CATALOG</th>
<th>PRIVILEGE_TYPE</th>
<th>IS_GRANTABLE</th>
</tr>
</thead>
<tbody>
<?php
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['GRANTEE'] . "</td>";
echo "<td>" . $row['TABLE_CATALOG'] . "</td>";
echo "<td>" . $row['PRIVILEGE_TYPE'] . "</td>";
echo "<td>" . $row['IS_GRANTABLE'] . "</td>";
echo "</tr>";
}
?>
</tbody>
</table>
<?php
mysqli_close($con);
?>
</body>
</html>
Halaman tersebut dapat dipoles dengan library DataTables sehingga menjadi seperti di bawah ini
Caranya cukup mudah, yaitu dengan menambahkan file-file berikut ke script
jquery.dataTables.css
jquery-1.11.1.min.js
jquery.dataTables.min.js
Tambahkan file-file yang dibutuhkan tersebut ke halaman php, sebalumnya copy terlebih dahulu ke htdocs, sebagai contoh sederhana saya copy ketiganya ke folder yang sama di mana saya menyimpan file grid_plain.php.
Kita akan membuat halaman index.php yang merupakan modifikasi dari grid_plan.php. Load file-file tersebut dengan menambahkan script berikut ke source code berikut sebelum </head>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="jquery-1.11.1.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="jquery.dataTables.js"></script>
Kemudian ubah
<table border="1">
menjadi
<table id="table_id" class="display">
Terakhir, sebelum </body> tambahkan
<script type="text/javascript">
$(document).ready( function () {
$('#table_id').DataTable();
});
</script>
Source code lengkap index.php adalah sebagai berikut
<html>
<head>
<title>Coba DataTable</title>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="jquery-1.11.1.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="jquery.dataTables.js"></script>
</head>
<body>
<?php
$con=mysqli_connect("localhost","root","","information_schema");
// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM USER_PRIVILEGES");
?>
<table id="table_id" class="display">
<thead>
<tr>
<th>GRANTEE</th>
<th>TABLE_CATALOG</th>
<th>PRIVILEGE_TYPE</th>
<th>IS_GRANTABLE</th>
</tr>
</thead>
<tbody>
<?php
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['GRANTEE'] . "</td>";
echo "<td>" . $row['TABLE_CATALOG'] . "</td>";
echo "<td>" . $row['PRIVILEGE_TYPE'] . "</td>";
echo "<td>" . $row['IS_GRANTABLE'] . "</td>";
echo "</tr>";
}
?>
</tbody>
</table>
<script type="text/javascript">
$(document).ready( function () {
$('#table_id').DataTable();
});
</script>
<?php
mysqli_close($con);
?>
</body>
</html>
Selesai, tampilan tabel akan menjadi seperti yang ada di screenshot
Apabila tampilan masih kurang bagus, dapat dimodifikasi file css nya (jquery.dataTables.css)
Sumber
http://www.datatables.net
Source code :
https://github.com/ardhiesta/datatables
CATATAN:
Fitur paging yang tersedia di DataTables masih sederhana, semua record diambil sehingga kurang efisien untuk jumlah record yang terlalu besar
Entries