Datatables adalah salah satu dari sekian banyak plugin jquery yang sangat membantu bagi kalian yang sedang membuat suatu sistem report yang ditampilkan dalam bentuk tabel. Selain itu Plugin ini sangat fleksibel untuk berinteraksi dengan tabel HTML pokoknya kaya fitur banget lah! :D

Beberapa fitur yang sangat membantu kalian contohnya,

  1. Paging, ya dalam plugin ini sudah disertakan modul page atau halaman yang memudahkan kamu berpindah halaman tabel tanpa harus pusing-pusing coding lagi.
  2. Fitur pencarian, fitur ini sangat berguna untuk membantu pencarian data dalam database..ya tentu saja ini sudah disertakan dalam plugin nya.
  3. Mode pengurutan, dalam plugin datatables ini sudah disertakan mode ini yang berguna untuk mengurutkan data secara Ascending dan Descending.
  4. Mode pembatasan, mode ini berguna untuk membatasi data perhalaman yang ditampilkan sepanjang tabel.
  5. MASIH BANYAK LAGIIIII….

wow jika dipikir-pikir ketika kita menggunakan PHP dan kita ingin membuat fungsi-fungsi tersebut akan lama dan banyak waktu diperlukan hehe…

Selain itu datatables ini memiliki tampilan yang sangat ciamik dan terlihat elegan, ya karena ketika kita menggunakan plugin ini sudah termasuk dengan file CSS dan tampilan layout-nya…

Waaaahhh… banyak sekali keunggulannya yaaa *lebay,

Intinya sih kita dapat menghemat waktu dalam membuat sistem report jika memanfaatkan plugin ini..

:)

Oke langsung aja kita coba keunggulan plugin ini…

Pertama buat dahulu database yang akan kita tampilin di datatables ini,

CREATE TABLE IF NOT EXISTS `mahasiswa` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `nim` int(100) DEFAULT NULL,
  `nama` varchar(45) DEFAULT NULL,
  `fakultas` varchar(45) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=8 ;

Setelah itu masukan data masing-masing ini,

INSERT INTO `mahasiswa` (`id`, `nim`, `nama`, `fakultas`) VALUES
(1, 1006677, 'Rina', 'FIP'),
(2, 1998378, 'Dodi', 'FPBS'),
(3, 1007786, 'Irwan', 'FIP'),
(4, 1006677, 'Arif', 'FIP'),
(5, 1898790, 'Dedi', 'FPKTK'),
(6, 8347890, 'Dani', 'FPBS'),
(7, 8293489, 'Dini', 'FMIPA');

Untuk tampilan HTML-nya saya buat simple, jadi langsung tampilan table plugin datatables ini…hehe *biar ga ribet

<!DOCTYPE html>
<html>
    <head>
        <title>Datatables</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <script src="media/js/jquery.js" type="text/javascript"></script>
        <script src="media/js/jquery.dataTables.js" type="text/javascript"></script>
        <link rel="StyleSheet" href="css/style.css" type="text/css" />
        <style type="text/css">
            @import "media/css/demo_table_jui.css";
            @import "media/themes/ui-lightness/jquery-ui-1.8.4.custom.css";
        </style>
        
        <style>
            *{
                font-family: arial;
            }
        </style>
        <script type="text/javascript" charset="utf-8">
            $(document).ready(function(){
                $('#datatables').dataTable({
                    "sPaginationType":"full_numbers",
                    "aaSorting":[[2, "desc"]],
                    "bJQueryUI":true
                });
            })
            
        </script>
    </head>
    <body>
        <div class="wrap">
			<div class="header">
			</div>
            <table id="datatables" class="display">
                <thead>
                    <tr>
                        <th>No</th>
						<th>NIM</th>
                        <th>Nama</th>
                        <th>Fakultas</th>
                    </tr>
                </thead>
                <tbody>
                      BAGIAN UNTUK MENAMPILKAN DATA DARI DATABASE
                </tbody>
            </table>
		<div class="footer">
			<p align="center">hitamcoklat</p>
		</div>
        </div>
    </body>
</html>

Bagian yang di highlight seperti plugin jquery lainnya yang merupakan bagian yang saling terikat dimana plugin ini akan mencari table dengan “id” datatables yang telah di deklarasikan pada perintah jquery di bagian <head></head> *coba lihar baris “26″

Cukup mudah bukan?

:D

Screenshot – Klik untuk melihat lebih jelas

datatables - screenshot

datatables - screenshot

bagian kalian yang masih penasaran bisa langsung download aja file yang sudah jadi

Semoga bermanfaat…

Salam Blogger! ⤧  Next post Uninstall dengan Adobe Creative Suite Cleaner Tool ⤧  Previous post Membuat Blog dengan PHP dan MySQL