Ada cara asik yang bisa Anda gunakan 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>
</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:
<style title="currentStyle" type="text/css"><br />
@import "DataTables/media/css/demo_page.css";<br />
@import "DataTables/media/css/demo_table_jui.css";<br />
@import "DataTables/examples/examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css";<br />
@import "DataTables/extras/TableTools/media/css/TableTools_JUI.css";<br />
<style><br />
<script type="text/javascript" language="javascript" src="DataTables/media/js/jquery.js"></script><br />
<script class="jsbin" src="http://datatables.net/download/build/jquery.dataTables.nightly.js"></script><br />
<script><br />
$(document).ready( function () {<br />
$('#example').dataTable( {<br />
"bJQueryUI": true,<br />
"sPaginationType": "full_numbers"<br />
} );<br />
} );<br />
</script>
<table border="0" cellpadding="0" cellspacing="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>Agus Saputra</td>
<td>CV. ASFA Solution</td>
<td>Director of Development Division</td>
</tr>
<tr>
<td>2</td>
<td>Feni Agustin</td>
<td>CV. ASFA Solution</td>
<td>VP Operation</td>
</tr>
<tr>
<td>3</td>
<td>Hadi Setiawan</td>
<td>CV. ASFA Solution</td>
<td>Marketing Lead Division</td>
</tr>
<tr>
<td>4</td>
<td>Ansera</td>
<td>CV. ASFA Solution</td>
<td>Web Developer</td>
</tr>
<tr>
<td>5</td>
<td>Anthonius</td>
<td>CV. ASFA Solution</td>
<td>Junior Programmer</td>
</tr>
<tr>
<td>6</td>
<td>Daniel</td>
<td>CV. ASFA Solution</td>
<td>Web Designer</td>
</tr>
</tbody>
</table>
Jika sudah, ya sudah jadi datatablenya.. mudahkan?.. menggunakan tag table biasa disisipi sedikit kode library jquery.. Semoga postingan kali ini dapat memberikan manfaat sebesar-besanrnya untuk Anda.
pengobatan tradisional maag kronis
isi webnya sangat inovatif,
http://goo.gl/SD72f
download lagu terbaru 2014
makasih banyak infonya yah thnks banget ajibbb
obat lemah syahwat
makasih atas infonya sangat menarik http://goo.gl/W38bt
Idham
Saya juga pake nih plugin, pake CI sebgi mesinnya.
Fatimah
Pak Agus,gimana caranya koneksi ke database untuk datatable-nya? di atas kan contohnya html manual ?
Agus Saputra
Fatimah @ koneksi database sama saja jika menggunakan PHP, bisa menggunakan mysql_connect dan mysql_select_db..
Pada dasarnya datatable itu sama seperti kode html biasa, yaitu menggunakan tag <table>
sari
pak gimana kalau menampilkan data table ke dialog box jquery?
Agus Saputra
sari @ menggunakan fancybox saja.. coba baca lebih lanjut di fancybox.net