Cara Menampilkan Data Menggunakan Datatables

Cara menampilkan data menggunakan datatables library jquery yang memungkinkan untuk menyajikan banyak data dalam bentuk tabel responsive, dilengkapi fitur page length atau banyaknya baris, paging, sorting, dan searching otomatis. Penggunaan datatables ini dapat langsung diintegrasikan dengan framework bootstrap sehingga interface web data yang ditampilkan akan semakin menarik. Sebagaimana yang akan kami jelaskan pada tutorial cara menampilkan data dengan datatables kali ini, yaitu menggunakan plugin datatables yang di instal langsung pada bootstrap. Oleh sebab itu, pada tutorial cara menggunakan datatables ini membutuhkan assets file yang saling terintegrasi yaitu bootstrap, jquery, dan plugin jquery datatables.

Datatables adalah plugin atau library yang dibangun dengan jquery untuk membuat dan mengatur tabel html pada sistem berbasis web, termasuk di dalamnya terdapat fitur searching, pagination, dan sorting.

Tutorial cara menampilkan data menggunakan datatables ini akan menghasilkan baris data pada tabel responsive yang dilengkapi dengan fitur paging, sorting, dan pencarian otomatis. Fitur pada tabel data tersebut akan sangat sulit jika dibuat dengan native, maka agar pemrograman menjadi lebih efektif, disarankan menggunakan plugin jquery dan datatables. Kami membuat tutorial datatables ini pada framework bootstrap v5.3.0 alpha1 dan plugin jquery, namun boleh juga memakai versi framework dan plugin datatables yang lebih baru.

Cara Menampilkan Data Menggunakan Datatables

cara menggunakan datatables

Penjelasan bagaimana cara menampilkan data menggunakan datatables terbagi menjadi beberapa bagian, mulai dari direktori folder asset, integrasi framewok dan plugin, hingga membuat kode program dengan script HTML untuk menampilkan data pada tabel.

• Download bootstrap, jquery dan plugin datatables
• Membuat direktori folder tutorial dan memasang datatables di htdocs
• Membuat kode program dengan script HTML untuk menampilkan tabel data pada datatables.

1. Download Framework Bootstrap, jQuery dan DataTables

Bootstrap dapat di download langsung pada situs resmi nya yaitu getbootstrap.com, sebaiknya pilih versi terbaru, di dalamnya terdapat kompilasi kode CSS dan JavaScript, dan atau source code examples. Ekstrak file rar hasil download, nanti akan menghasilkan assets dengan nama folder "CSS" dan javascript "JS", silahkan simpan sementara pada folder yang ada, tapi sebaiknya langsung di htdocs.

Selanjutnya adalah download plugin datatables dan jquery, keduanya dapat di unduh secara package melalui situs resminya yaitu datatables.net, pastikan pada step "select packages" pilih juga (ceklist) jQuery nya. Silahkan ekstrak file download tersebut ke dalam folder dengan nama misal "DataTables", sehingga di dalamnya nanti terdapat file dan folder yaitu DataTables dan jQuery.

2. Membuat Folder Direktori Tutorial DataTables

Buatlah sebuah folder tutorial langsung di direktori xampp htdocs, sebagai contoh nama folder nya adalah "datatables", sehingga url folder pada direktori xampp menjadi C:\xampp\htdocs\datatables\.

Kemudian di dalam folder "datatables" tersebut buat lagi folder dengan nama "assets" yang akan digunakan untuk menyimpan kompilasi kode framework bootstrap yaitu folder CSS dan JS, serta folder "DataTables" yang berisi folder jQuery dan plugin datatables.

Pastikan instal plugin DataTables berhasil, cek ke dalam folder \datatables\assets\ harusnya terdapat susunan 3 nama folder yaitu css, DataTables, dan js seperti pada gambar di bawah ini.

3. Membuat File Index dengan HTML untuk Menampilkan Data pada Tabel

Untuk menampilkan data menggunakan datatables dibutuhkan juga sebuah script html yang digunakan sebagai desain sebuah tampilan tabel, mulai dari header, kolom hingga baris atau row data. File index ini disebut juga sebagai homepage, maka pastikan tersimpan di dalam folder direktori utama yaitu \datatables\, sehingga sejajar dengan folder "assets" bootstrap dan datatables. Berikut adalah kode html untuk menampilkan data pada tabel sekaligus memasang atau instal datatables dan jQuery nya, sehingga menghasilkan tabel yang responsive.

Save as index.html

<!DOCTYPE html>
<html>
<head>
	<title>Cara Menampilkan Data Menggunakan Datatables</title>	
	<script type="text/javascript" src="assets/DataTables/jQuery-3.6.0/jquery-3.6.0.js"></script>
	<script type="text/javascript" src="assets/DataTables/DataTables-1.13.4/js/jquery.dataTables.js"></script>
	
	<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="assets/DataTables/DataTables-1.13.4/css/jquery.dataTables.css">
	<link rel="stylesheet" type="text/css" href="assets/DataTables/DataTables-1.13.4/css/dataTables.bootstrap.css">
</head>
<body>
	<h2 align="center">Menampilkan Data Menggunakan Datatables</h2>
	<br/>
	<div class="container">
		<table class="table table-striped table-bordered data">
			<thead>
				<tr>			
					<th>Nama</th>
					<th>Alamat</th>
					<th>Pekerjaan</th>
					<th>Usia</th>
					<th>Status</th>
				</tr>
			</thead>
			<tbody>
				<tr>				
					<td>Andre</td>
					<td>Cilacap</td>
					<td>App Developer</td>
					<td>31</td>
					<td>Aktif</td>
				</tr>
				<tr>				
					<td>Handayani</td>
					<td>Bandung</td>
					<td>Web Designer</td>
					<td>26</td>
					<td>Aktif</td>
				</tr>
				<tr>				
					<td>Sulistyo Agung</td>
					<td>Jakarta</td>
					<td>Graphic Designer</td>
					<td>29</td>
					<td>Aktif</td>
				</tr>
				<tr>				
					<td>Narendra</td>
					<td>Jakarta</td>
					<td>Mobile App Developer</td>
					<td>31</td>
					<td>Aktif</td>
				</tr>
				<tr>				
					<td>Firly Pratama</td>
					<td>Banyumas</td>
					<td>IT Support</td>
					<td>25</td>
					<td>Aktif</td>
				</tr>
				<tr>				
					<td>Gunawan R</td>
					<td>Purbalingga</td>
					<td>Web Designer</td>
					<td>28</td>
					<td>Aktif</td>
				</tr>
				<tr>				
					<td>Kansa Putra</td>
					<td>Jakarta</td>
					<td>Web Developer</td>
					<td>24</td>
					<td>Aktif</td>
				</tr>
				<tr>				
					<td>Hasanudin</td>
					<td>Kebumen</td>
					<td>Database Analyst</td>
					<td>34</td>
					<td>Aktif</td>
				</tr>
				<tr>				
					<td>Laksita</td>
					<td>Banjarnegara</td>
					<td>UI/UX Designer</td>
					<td>31</td>
					<td>Aktif</td>
				</tr>
				<tr>				
					<td>Lusiana M</td>
					<td>Purbalingga</td>
					<td>Web Designer</td>
					<td>29</td>
					<td>Aktif</td>
				</tr>
				<tr>				
					<td>Weliyan</td>
					<td>Banyumas</td>
					<td>App Developer</td>
					<td>32</td>
					<td>Aktif</td>
				</tr>
				<tr>				
					<td>Cucuk PR</td>
					<td>BrebeS</td>
					<td>Internal Testing</td>
					<td>30</td>
					<td>Aktif</td>
				</tr>
				<tr>				
					<td>Bagus Adi P</td>
					<td>Cilacap</td>
					<td>App Developer</td>
					<td>33</td>
					<td>Aktif</td>
				</tr>
				<tr>				
					<td>Doni M</td>
					<td>Bekasi</td>
					<td>UI/UX Designer</td>
					<td>29</td>
					<td>Tidak Aktif</td>
				</tr>
				<tr>				
					<td>Indra L</td>
					<td>Jakarta</td>
					<td>Web Designer</td>
					<td>27</td>
					<td>Aktif</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
<script type="text/javascript">
	$(document).ready(function(){
		$('.data').DataTable();
	});
</script>
</html>

Coba perhatikan kode baris ke 5 dan 6 serta 9 dan 10 yang terletak di dalam tag head berikut ini.

<script type="text/javascript" src="assets/DataTables/jQuery-3.6.0/jquery-3.6.0.js"></script>
<script type="text/javascript" src="assets/DataTables/DataTables-1.13.4/js/jquery.dataTables.js"></script>
	
<link rel="stylesheet" type="text/css" href="assets/DataTables/DataTables-1.13.4/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="assets/DataTables/DataTables-1.13.4/css/dataTables.bootstrap.css">

Itulah sebuah source dari plugin DataTables dan jQuery yang telah di instal ke dalam script HTML, jika telah berhasil terpasang instal plugin datatables tersebut maka selanjutnya adalah cukup memanggil class di setiap tabel yang dibuat.

Selanjutnya perhatikan baris kode ke 16 di dalam tag body html untuk pemanggilan class berikut ini.

<table class="table table-striped table-bordered data">

Disitu kita mulai membuat tabel untuk menampilkan data menggunakan datatables, tag table memanggil sebuah class dengan nama "table table-striped table-bordered data". Untuk membuat tampilan tabel yang lebih sederhana kita boleh memanggil class primary nya saja yaitu table dan data <table class="table data">.

Cukup sampai disini tutorial cara menampilkan data menggunakan datatables plugin atau library jquery, sehingga menghasilkan desain tabel data yang responsive lengkap dengan fitur paging. Untuk menjalankan coding script datatables tersebut pada web browser, silahkan ketik url localhost/datatables/, pasti berhasil jika tutorial ini diikuti dengan teliti. Untuk melengkapi tutorial datatables ini, kami lampirkan source code plugin datatables lengkap berikut desain tabel datanya, tinggal dijalankan saja, silhakan download melalui tautan di bawah.

Tutorial Cara Menampilkan Data Menggunakan Datatables

Download Script Datatables

Sekian penjelasan tutorial tentang datatables yaitu cara menampilkan data menggunakan datatables dan jQuery sehingga memungkinkan mendesain tabel responsive dengan fitur sorting, searching, dan paging. Jika terjadi gagal atau error atau tidak berhasil berjalan sebagaimana mestinya, silahkan hubungi kami melalui live chat atau form komentar. Semoga dapat membantu.

Baca juga :

• Cara Aktivasi Windows 10 Pro Permanen Gratis
• Script PHP Mengurangi Stok Barang
• Cara Menambah Kapasitas Upload XAMPP
• Membatasi Ukuran File Upload di PHP
• Cara Mempercepat Loading Web dengan htaccess
• Membuat Laporan Excel dengan PHP dan MySQLi

Cara Menampilkan Data Menggunakan Datatables

Tags: menampilkan data menggunakan datatables, cara menggunakan datatables, cara instal datatables, cara pasang datatables, plugin datatables, cara menampilkan data menggunakan datatables