Beberapa Fitur yang ada pada Datatable diantaranya :
- Searching ( Pencarian Data)
- Sorting ( Mengurutkan Data Berdasarkan Header Kolom)
- Pagging ( Halaman )
- Batas tampilan data perhalaman dalam bentuk combobox.
Baca Juga Cara Membuat Table Dengan HTML
Tuliskan Script HTML ini ke notepad ++ ataupun editor lainnya :
<!DOCTYPE HTML> <html> <head> <title> Penggunaan Table Secara Manual</title> </head> <body> <table border="1"> <caption> Contoh pembuatan table Secara manual</caption> <thead> <tr> <th>Toko</th> <th>Barang 1</th> <th>Barang 2</th> <th>Barang 3</th> </tr> </thead> <tfoot> <tr> <td>Total</td> <td>10.000</td> <td>20.000</td> <td>30.000</td> </tr> </tfoot> <tbody> <tr> <td>Pasar Anyer</td> <td>2000</td> <td>6000</td> <td>9000</td> </tr> <tr> <td>Mall</td> <td>8000</td> <td>14000</td> <td>21000</td> </tr> </tbody> </table> </body> </html>Simpan file tersebut dengan nama terserah anda namun berextesi html. Lalu jalakan script html tersebut di browser maka akan muncul tampilan seperti ini
Hasilnya akan tidak enak dilihat bukan? sekarang saya akan coba menggunakan datatables ke dalam script diatas.
Pertama Download Terlebih dahulu jQuery DataTables di http://www.datatables.net/download/index
Lalu ekstak File yang sudah di download di 1 folder dengan file html yang sudah di buat sebelumnya. ekstrak menggunakan Winrar Maupun Winzip.
Rename folder DataTables-x.x menjadi datatables
Setelah itu lakukan pengeditan pada script html tadi menjadi seperti
<!DOCTYPE HTML>
<html>
<head>
<title>Penggunaan Table Secara Manual</title>
<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/jquery.dataTables.min.js"></script>
<link href="datatables/media/css/jquery.dataTables.css" rel="stylesheet" type="text/css" /><!--<link type="text/css" rel="stylesheet" href="datatables/media/css/jquery.dataTables.min.css"/>--><!--<link type="text/css" rel="stylesheet" href="datatables/media/css/jquery.dataTables_themeroller.css"/>--><script type="text/javascript">
$(document).ready(function() {
$('#belajar').dataTable();
} );
</script>
</head>
<body>
<table align="center" class="display" id="belajar">
<caption>Contoh pembuatan Table Menggunakan Datatables</caption>
<thead>
<tr>
<th>Toko</th>
<th>Barang 1</th>
<th>Barang 2</th>
<th>Barang 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pasar Anyer</td>
<td>2000</td>
<td>6000</td>
<td>9000</td>
</tr>
<tr>
<td>Mall</td>
<td>8000</td>
<td>14000</td>
<td>21000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>10.000</td>
<td>20.000</td>
<td>30.000</td>
</tr>
</tfoot>
</table>
</body>
</html>
Maka Hasilnya akan seperti ini
Semoga bermanfaat dan selamat berexperimen :)
thx gan ilmuny langsung ane praktekkin
ReplyDelete