Pengenalan dan Penggunaan Datatables
Assalamu alaikum Wr Wb.
Dalam pertemuan kali ini, saya akan membahas mengenai pengenalan datatables.
PENGERTIAN
DataTables adalah plug-in untuk perpustakaan jQuery Javascript. Ini adalah alat yang sangat fleksibel, berdasarkan dasar-dasar peningkatan progresif, dan akan menambah kontrol interaksi canggih untuk setiap tabel HTML.
LATAR BELAKANG
Data Table akan membantu kita dalam hal pembuatan paging, searching, dan sortir data untuk ditampilkan dalam halaman sebuah website.
MAKSUD DAN TUJUAN
Maksud saya membahas hal ini adalah agar kita dimudahkan untuk membuat paging, searching, dan sortir data dengan datatables.
ALAT DAN BAHAN
1. PC / Laptop / Notebook
2. Text Editor (Sublime Text)
3. Web Server (Jika perlu)
4. Web Browser (Mozilla Firefox)
5. File DataTables
PEMBAHASAN
1. Apa itu DataTable?
DataTable adalah salah satu plugin dari JQuery. DataTable digunakan untuk menampilkan data dalam bentuk grid(tabel). DataTable memiliki banyak fitur interaktif, diantaranya:
- Pagination, pencarian instan dan multi-kolom pemesanan
- Sorting (mengurutkan data berdasarkan header kolom)
- Mendukung hampir semua sumber data:
DOM, Javascript, Ajax dan pemrosesan di sisi server
- dokumentasi yang solid dan referensi antarmuka
- Batas tampilan data per halaman dalam bentuk combobox.
Anda bisa mengunjungi situs http://www.datatables.net untuk lebih lengkapnya.
2. Cara Penggunaan DataTable dan contohnya
- Download dulu filenya disini.
- Setelah itu ekstrak filenya.
- Letakkan di directory /htdocs atau /var/www/html (boleh di directory lain ) .
- Lalu Buat Folder baru di /htdocs atau /var/www/html dan beri nama folder tadi.
- Buka text editor-nya , buat file baru beri nama index.html
- Masukkan script berikut ke dalam file index.php tadi.
Assalamu alaikum Wr Wb.
Dalam pertemuan kali ini, saya akan membahas mengenai pengenalan datatables.
PENGERTIAN
DataTables adalah plug-in untuk perpustakaan jQuery Javascript. Ini adalah alat yang sangat fleksibel, berdasarkan dasar-dasar peningkatan progresif, dan akan menambah kontrol interaksi canggih untuk setiap tabel HTML.
LATAR BELAKANG
Data Table akan membantu kita dalam hal pembuatan paging, searching, dan sortir data untuk ditampilkan dalam halaman sebuah website.
MAKSUD DAN TUJUAN
Maksud saya membahas hal ini adalah agar kita dimudahkan untuk membuat paging, searching, dan sortir data dengan datatables.
ALAT DAN BAHAN
1. PC / Laptop / Notebook
2. Text Editor (Sublime Text)
3. Web Server (Jika perlu)
4. Web Browser (Mozilla Firefox)
5. File DataTables
PEMBAHASAN
1. Apa itu DataTable?
DataTable adalah salah satu plugin dari JQuery. DataTable digunakan untuk menampilkan data dalam bentuk grid(tabel). DataTable memiliki banyak fitur interaktif, diantaranya:
- Pagination, pencarian instan dan multi-kolom pemesanan
- Sorting (mengurutkan data berdasarkan header kolom)
- Mendukung hampir semua sumber data:
DOM, Javascript, Ajax dan pemrosesan di sisi server
- dokumentasi yang solid dan referensi antarmuka
- Batas tampilan data per halaman dalam bentuk combobox.
Anda bisa mengunjungi situs http://www.datatables.net untuk lebih lengkapnya.
2. Cara Penggunaan DataTable dan contohnya
- Download dulu filenya disini.
- Setelah itu ekstrak filenya.
- Letakkan di directory /htdocs atau /var/www/html (boleh di directory lain ) .
- Lalu Buat Folder baru di /htdocs atau /var/www/html dan beri nama folder tadi.
- Buka text editor-nya , buat file baru beri nama index.html
- Masukkan script berikut ke dalam file index.php tadi.
<?php
include "config.php"
?>
<!DOCTYPE html>
<html>
<head>
<title>Data Pengembalian</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="DataTables/media/css/dataTables.foundation.css">
<link rel="stylesheet" type="text/css" href="../../font-awesome/css/font-awesome.min.css">
</head>
<body>
<center>
<h2> Data Pengembalian </h2>
<br>
</center>
<div class="container">
<table class="table table-striped table-bordered data">
<thead>
<tr>
<th> Buku </th>
<th> Nama </th>
<th> Tanggal Pinjam </th>
<th> Tanggal Jatuh Tempo </th>
<th> Tanggal Kembali </th>
<th> Pilihan </th>
</tr>
</thead>
<tbody>
<?php
$data_siswa = "SELECT buku.buku_judul, pinjam.tgl_pinjam, pinjam.tgl_jatuh_tempo,kembali.kembali_id, kembali.tgl_kembali, anggota.anggota_nama
FROM pinjam
JOIN buku ON buku.buku_id = pinjam.buku_id
JOIN anggota ON anggota.anggota_id = pinjam.anggota_id
JOIN kembali ON pinjam.pinjam_id = kembali.pinjam_id" ;
$eksekusi = mysqli_query($koneksi, $data_siswa);
while ($row = mysqli_fetch_assoc($eksekusi)) {
?>
<tr>
<td><?php echo $row['buku_judul'] ?></td>
<td><?php echo $row['anggota_nama'] ?></td>
<td><?php echo date('d-m-Y', strtotime($row['tgl_pinjam'])) ?></td>
<td><?php echo date('d-m-Y', strtotime($row['tgl_jatuh_tempo'])) ?></td>
<td>
<?php
if (empty($row['tgl_kembali'])) {
echo "-";
}
else {
echo date('d-m-Y', strtotime($row['tgl_kembali']));
}
?>
</td>
<td>
<a href="proses-delete-pinjam.php" onclick="return confirm('anda yakin akan menghapus data?')" ><button class="btn btn-danger"><i class="fa fa-trash"></i> Hapus</button></a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
<a href="cetak.php" name="cetak"><button class="btn btn-warning"><i class="fa fa-print" ></i> Cetak</button></a>
<script type="text/javascript" src="DataTables/media/js/jquery.js"></script>
<script type="text/javascript" src="DataTables/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="DataTables/media/js/dataTables.bootstrap4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.data').DataTable();
});
</script>
</div>
</body>
</html>
- Setelah selesai memasukkan script, maka akan muncul tampilan seperti ini pada web browser.
REFERENSI
https://datatables.net/
http://ciqwan.blog.unigha.ac.id/2014/08/06/teknik-penggunaan-data-tables-plugin-j-query/
Sekian yang dapat saya paparkan, apabila ada kesalahan dalam pengetikan, tata letak ,dll saya minta maaf.
Semoga Bermanfaat
Wassalamu alaikum Wr Wb.
No comments:
Post a Comment