Jquery Datatables Session 1:Perkenalan

Menampilkan data didalam tabel, merupakan hal yang sering dilakukan oleh seorang programer. Untuk memudahkan pengguna (User), ada baiknya kita memberi fasilitas management tabel pada data yang akan ditampilkan tersebut. Misalkan saja sorting, pagging, search data
Susah????
Memang benar memberi fasilitas seperti itu memang susah, tapi dengan bantuan Jquery, semua itu bisa dilakukan dengan sedikit script sederhana.Ada beberapa Jquery yang menyediakan fungsi untuk management tabel, beberapa diantaranya Datatables dan jqGrid.
Diposting ini saya hanya akan membahas mengenai Datatables

Sebelumnya untuk mendownload datatables, bisa didownload disitus resminya disini.
Untuk menampilkan datatables defaultnya sangat mudah, cukup ketikan javascript dibawah ini.

<script type="text/javascript" charset="utf-8">< br/>
$(document).ready(function() {< br/>
    oTable = $('#example').dataTable({< br/>
        "bJQueryUI": true,< br/>
        "sPaginationType": "full_numbers",< br/>
        "aaSorting": [[ 4, "desc" ]]< br/>
    });< br/>
} );< br/>
</script>r

Lalu implementasi ditabelnya

<table class="display" id="example"><
<thead>
<tr>
<td>Nama Pegawai</td>
<td>Jabatan</td>
<td>Alamat</td>
</tr>
</thead>
<tbody>
<tr><td>Nama 1</td><td>Jabatan 1</td><td>Alamat 1</td></tr>
<tr><td>Nama 2</td><td>Jabatan 2</td><td>Alamat 2</td></tr>
<tr><td>Nama 3</td><td>Jabatan 3</td><td>Alamat 3</td></tr>
</tbody>
</table>

Download Source Code
IDWS