Menginstal dan Menggunakan DataTables

Assalamualaikum Wr Wb.

A. Pengertian

DataTable adalah salah satu plugin dari jQuery. DataTable digunakan untuk menampilkan data dalam bentuk grid (tabel). DataTable memiliki banyak fitur-fitur interaktif, diantaranya:

Searching (Pencarian Data)
Pagging (halaman)
shorting (mengurutkan Halaman)
Batas tampilan data per halaman dalam bentuk comboobox

Saat ini DataTabels banak sekali digunakan oleh developer dalam menyusun tabel data. Menariknya, DataTable memiliki theme, jadi kita tidak perlu takut merasa bosan. Tampilan ciamik dari datatable dijamin tidak bosen. Anda bisa mengunjungi situs resmi DataTables.net untuk detailnya.

B. Latar Belakang

Untuk menampilkan data dengan tabel di html dengan rapi kita butuh waktu yang lama. Dengan Menggunakan plugin DataTables kita bisa mempersingkat waktu kita.
C. Maksud dan Tujuan
Mampu menggunkan plugin DataTables.
D. Alat dan Bahan

Web Browser
Text Editor
Plugin DataTables

E. Pembahasan
Untuk teman-teman yang ingin mendownload Source Code nya bisa download disini.
Untuk bisa menggunkan plugin DataTables kita harus menghubungkan dulu dengan file library dan plugin datatables. Dalam tutorial ini saya menggunkan bootsrap agar tampilan dari data table yang akan kita buat lebih menarik. Letakkan kode dibawah ini didalam tag <head>.

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/DataTables/media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="assets/DataTables/media/css/dataTables.bootstrap.css">
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="assets/DataTables/media/js/jquery.js"></script>
<script type="text/javascript" src="assets/DataTables/media/js/jquery.dataTables.js"></script>

Cara Mngunakan Datatables
Setelah selesai menhubungkan file-file ynag kita perlukan seperti Bootsrap, jquery dan plugin jquery datatables. Kemudian kita tinggal membuat table yang berisi data. Format struktur penulisan table html yang dibaca oleh database, harus menggunkan tag <thead> untuk table bagian kepala, dan tag table untuk bagian body.

Setelah selesai membuat table nya selanjutnya kita berikan fungsi datatabels nya

<script type="text/javascript">

$(document).ready(function(){

$('#tabel').DataTable();});

</script>

letakkan kode diatas dengan dibawah tag </body> yang harus kita perhatikan saat menggunakan datatables adalah nama id yang kita buat. disini pada table saya membuat id dengan nama "tabel".
Maka hasilnya akan terlihat seperti gambar dibawah ini.