Jquery datatables : dynamic data, custom column, add link icon, open in facebox from id – part 2

**** Part 2 : Call jquery datatables ****

Setelah berhasil memunculkan data array dari mysql, sebelum melanjutkan ke tahapan berikutnya, anda perlu mendownload

1. jquery.datatables. Versi sampai dengan tulisan ini ditulis adalah 1.9.4.

2. Latest jquery

3. Latest jquery-ui untuk tampilan interface-nya

OK setelah semua terdownload dan diasumsikan anda sudah tau lokasi penyimpanan dan cara pemanggilan data relatif terhadap root, kita perlu membuat file php untuk menampilkan data tbl_email kedalam format jquery.datatables. Misalnya kita membikin file dengan nama : email_datatable.php

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Untitled Document</title>
<link href=”demo_table_jui.css” rel=”stylesheet” type=”text/css” />
<link href=”jquery-ui-1.10.4.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”jquery-1.8.2.min.js”></script>
<script type=”text/javascript” src=”jquery-ui-1.10.4.min.js”></script>
<script type=”text/javascript” src=”jquery.dataTables.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$(‘#example’).dataTable( {
“bProcessing”: true,
“bServerSide”: true,
“bJQueryUI”: true,
“sAjaxSource”: “email_data.php”,
“sPaginationType”: “full_numbers”,
} );
} );
</script>

</head>

<body>
<table cellpadding=”0″ cellspacing=”0″ border=”0″ class=”display” id=”example”>
<thead>
<tr>
<th width=”20%”>id</th>
<th width=”20%”>Jenis</th>
<th width=”30%”>Nama</th>
<th width=”30%”>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan=”4″ class=”dataTables_empty”>Loading data from server</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>id</th>
<th>Jenis</th>
<th>Nama</th>
<th>Email</th>
</tr>
</tfoot>
</table>
</body>
</html>

untuk lokasi file ini terhadap beberapa file css dan javascript tolong disesuaikan sendiri linknya :p. Bila semuanya lancar, seharusnya tampilannya akan seperti ini (klik untuk memperbesar)

19-04-2014 22-44-04

Jika sudah berhasil melakukan penampilan data seperti diatas, berarti anda sudah siap untuk lanjut ke Part-3

Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s