Cara Membuat Tabel Dengan Mengunakan Bootstrap

Example blog post alt

Bootstrap | 2018-05-22

Pada kesempatan kita akan mencoba membuat tabel dengan mengunakan bootstrap dan plugin dari datatables. Sebelumnya kita harus menyiapkan bahan terlebih dahulu yaitu :

1. Bootstrap, unduh di Bootstrap.

2. Plugin datatables, unduh disini datatables

3. XAMPP, banyak web server yang lain tetapi kita mengunakan XAMPP.

#Step1

Extract bootstrap yang telah di download kedalam folder yang telah kita siapkan di htdocs, seperti gambar di bawah ini :

#Step2

Buat folder baru didalam folder tersebut dengan nama datatable, seperti gambar di bawah ini :

#Step3

Copykan plugin datatables yang telah di download tadi kedalam folder datatable, seperti di bawah ini :

Cukup yang diambil datatables.min.css dan datatables.min.js

#Step4

Sekarang kita buat file index.php  untuk membuat tabel dengan script di bawah ini :

<htmL>
<head>
	<title>Bootstrap</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/bootstrap.css">
	<script src="js/jquery-2.2.3.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="datatable/datatables.min.js"></script>
	<link rel="stylesheet" href="datatable/datatables.min.css">
</head>
<body>
<div class="container">
	<h3 class="page-header">Data Table</h3>
	<table class="table table-bordered table-striped" id="example">
	<thead>
		<tr style="background:#CCCCCC;">
			<td>No</td>
			<td>Nama</td>
			<td>Alamat</td>
			<td>Tempat Lahir</td>
			<td>Tanggal Lahir</td>
			<td>Pekerjaan</td>
			<td>Aksi</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>Andi</td>
			<td>Jl. Harapan Raya</td>
			<td>Jambi</td>
			<td>02 Agustus 2017</td>
			<td>Sales</td>
			<td><a href="">Delete</a> <a href="">Edit</a></td>
		</tr>
		<tr>
			<td>2</td>
			<td>Doni</td>
			<td>Jl. Harapan Satu</td>
			<td>Jakarta</td>
			<td>10 Januari 2009</td>
			<td>Marketing</td>
			<td><a href="">Delete</a> <a href="">Edit</a></td>
		</tr>
		<tr>
			<td>3</td>
			<td>Jaya</td>
			<td>Jl. Harapan Dua</td>
			<td>Medan</td>
			<td>11 Maret 2005</td>
			<td>Direktur</td>
			<td><a href="">Delete</a> <a href="">Edit</a></td>
		</tr>
		<tr>
			<td>4</td>
			<td>Adi</td>
			<td>Jl. Kasuari</td>
			<td>Padang</td>
			<td>04 Januari 2003</td>
			<td>Sopir</td>
			<td><a href="">Delete</a> <a href="">Edit</a></td>
		</tr>
		<tr>
			<td>5</td>
			<td>Hendra</td>
			<td>Jl. Cendrawasih</td>
			<td>Bengkulu</td>
			<td>25 April 2012</td>
			<td>IT</td>
			<td><a href="">Delete</a> <a href="">Edit</a></td>
		</tr>
	</tbody>
</table>
</div>
</body>
</html>

Tambah juga javascript untuk pemanggilan id dari tabel yaitu example, letak script ini di bawah </html>

<script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script>

Perlu di ingat, pemanggilan source dari plugin datatable tersebut, lihat seperti di bawah ini :

<script src="datatable/datatables.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="datatable/datatables.min.css" type="text/css">

Selamat mencoba !!

Download Aplikasi