Ada cara yang kreatif dalam menampilkan data. biasanya jika cara manual kita hanya menampilkan tabel biasa.. namun ada kekurangannya.. tabel biasa yang anda buat hanya sebatas menampilkan data saja ditambah penomoran halaman pun terpisah antara data tersebut, jadi bisa dibilang, Anda membuat dobel kode, yaitu:
1. Kode untuk menampilkan data
2. Kode untuk membuat halaman (paging).

Namun disini ada teknik baru yang ingin penulis bagikan kepada Anda, yaitu dataTable.. sebuah fungsi menggunakan jQuery yang akan mengubah tampilan Anda secara responsif.. penerapannya pun sangat mudah.. karena hanya menggunakan tag tabel html biasa, seperti <table> dan penutup </table>.. hanya saja pada tag <table>, kita bisa berikan id selector, yang akan merubah tampilan data Anda secara 360 derajat..

Langsung saja:
1. Download plugin dataTable jQuery di situs: http://www.datatables.net/ (.zip)
2. Jika sudah, lakukan extract file .zip, akan menghasilkan folder (ubah nama folder sesuai dengan keinginan Anda untuk mudah diingat), penulis mengubah menjadi folder dataTables

3. Tuliskan skrip berikut:

<html>
<head>
<style type="text/css" title="currentStyle">
@import "DataTables/media/css/demo_page.css";
@import "DataTables/media/css/demo_table_jui.css";
@import "DataTables/examples/examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css";
@import "DataTables/extras/TableTools/media/css/TableTools_JUI.css";
</style>
<script type="text/javascript" language="javascript" src="DataTables/media/js/jquery.js"></script>
<script class="jsbin" src="http://datatables.net/download/build/jquery.dataTables.nightly.js"></script>
<script>
$(document).ready( function () {
$('#example').dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers"
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<h1>Data Table</h1>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Perusahaan</th>
<th>Jabatan</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Andika Jaya</td>
<td>Konsultan IT</td>
<td>Director of Development Division</td>
</tr>
<tr>
<td>2</td>
<td>Sukmawati</td>
<td>Konsultan IT</td>
<td>VP Operation</td>
</tr>
<tr>
<td>3</td>
<td>Brawijaya</td>
<td>Konsultan IT</td>
<td>Marketing Lead Division</td>
</tr>
<tr>
<td>4</td>
<td>Burhanuddin</td>
<td>Konsultan IT</td>
<td>Web Developer</td>
</tr>
<tr>
<td>5</td>
<td>Rendi Irawan</td>
<td>Konsultan IT</td>
<td>Junior Programmer</td>
</tr>
<tr>
<td>6</td>
<td>Daniel Manata</td>
<td>Konsultan IT</td>
<td>Web Designer</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Untuk source code nya klik disini untuk download full source..

One thought on “Tampil Data Menggunakan DataTable Plugin

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *