Tabel merupakan bidang baris dan kolom yang memuat sejumlah data. Data didalam tabel berupa angka maupun kata-kata yang tersusun sesuai dengan data yang ada. DataTables merupakan sebuah plugin yang dibangun dengan jQuery untuk menampilkan data ke tabel yang sudah terintegrasi dengan fitur searching dan pagination sehingga memudahkan untuk membaca tabel dan menerapkan tabel pada sistem berbasis web.
Untuk menerapkan DataTables memerlukan plugin jQuery dan Css DataTables yang bisa di download pada website datatables. bisa juga menyisipkan code script berikut pada coding tapi memeerlukan online terkoneksi dengan internet untuk menggunakan plugin DataTables.
Sebelum membuat database harus sudah ada phpMyadmin, baca : Install XAMPP di Linux atau Install XAMPP di Windows , juga baca : Membuat Database di XAMPP
Berikut adalah cara menampilkan data pada DataTables di PHP menggunakan Boostrap :
1. Membuat database dan table
Database : Mahasiswa
Table : mhs
Fields : id ( auto ), nama, fakultas
Script untuk insert data ke table mhs
Insert Into mhs(nama, fakultas) Values
('Sandi Mata','MIPA'), ('Indah Purba','MIPA'),
('Julianto Sani','Sastra'), ('Sadio Inda','Sastra'),
('Mahwati Indah','Teknik'), ('Melati Surya','Teknik'),
('Eka Pratama','Pertanian'),('Dwi Lingga','Pertanian'),
('Fajar Eksaka','Kedokteran'), ('Raja Tindore','Ekonomi'),
('Farhat Essa','Ekonomi'),('Indah Purnama','Ekonomi');
2. Membuat File : koneksi.php
<?php
// isi nama host, username mysql, dan password mysql
$host = mysql_connect("localhost","root","");
// isi nama database yang akan di hubungkan
$db = mysql_select_db("mahasiswa");
?>
3. Membuat File : listMahasiswa.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pagination</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<script src="js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href = "//cdn.datatables.net/1.10.11//css/jquery.dataTables.min.css">
</head>
<body>
<?php
include 'koneksi.php';
?>
<div class="col-sm-6" style="padding-top: 20px; padding-bottom: 20px;">
<h3>DataTables Menggunakan PHP dan Bootstrap</h3> <hr>
<table class="table table-stripped table-hover datatab">
<thead>
<tr>
<th>No</th>
<th>Id</th>
<th>Nama</th>
<th>Fakultas</th>
</tr>
</thead>
<tbody>
<?php
$query = mysql_query("Select * From mhs");
$no = 1;
while ($data = mysql_fetch_assoc($query))
{
?>
<tr>
<td><?php echo $no++; ?></td>
<td><?php echo $data['id']; ?></td>
<td><?php echo $data['nama']; ?></td>
<td><?php echo $data['fakultas']; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</body>
<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() {
$('.datatab').DataTable();
} );
</script>
</html>
4. Jika dijalankan maka akan menampilkan layout seperti gambar dibawah :
