Kategori Random

Membuat Paging Otomatis tabel menggunakan jquery datatables

Posted : 22 Agustus 2016 | 17:53:57 , Dibaca 3547 kali

Pada saat kita menampilkan data yang kita querykan dari database menggunakan query SQL SELECT, kita bisa saja menampilkan ribuan data. Sangat tidak sarankan untuk menampilkan semua hasil data pada satu halaman. Ada baiknya kita membagi hasil yang banyak ini menjadi beberapa halaman sesuai kebutuhan. Paging atau pagination pada sebuah halaman website sangat dibutuhkan jika data sudah mencapai lebih dari puluhan bahkan ratusan ribu record. Dengan penggunaan paging kita dapat membagi halaman website agar menjadi lebih rapi.

Pada query select cara membagi halaman (paging) bisa menggunakan LIMIT dari dua argumen yang dibagi awal dan batas. Namun pada kesempatan ini kita tidak membahas penggunaan query SELECT ... LIMIT tersebut tetapi menggunakan bantuan plugin jquery dataTables. Yupp benar sekali plugin ini telah dirancang sedemikian rupa untuk mempercantik halaman paging yang kita bahas tadi. Tanpa berpanjang lebar mari kita bahas dibawah ini.

Untuk dapat menggunakannya kita harus mempersiapkan plugin tersebut bisa didownload pada laman resminya di DataTables mari kita coba pada script dibawah ini :

1. Database

Pertama silakan create nama database nya dan create table seperti dibawah ini

Struktur tabelna :

CREATE TABLE `tbl_percobaan` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nama` varchar(30) DEFAULT NULL,
  `alamat` text,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=12 DEFAULT CHARSET=latin

Data Tabel :

insert into `tbl_percobaan` (`id`, `nama`, `alamat`) values('1','Faber','Medan');
insert into `tbl_percobaan` (`id`, `nama`, `alamat`) values('2','Nainggolan','Tarutung');
insert into `tbl_percobaan` (`id`, `nama`, `alamat`) values('3','Sule','Bandung');
insert into `tbl_percobaan` (`id`, `nama`, `alamat`) values('4','Agus ','Papua');
insert into `tbl_percobaan` (`id`, `nama`, `alamat`) values('5','Butet','Medan');
insert into `tbl_percobaan` (`id`, `nama`, `alamat`) values('6','Uccok','Medan');
insert into `tbl_percobaan` (`id`, `nama`, `alamat`) values('7','Iw','Jakarta');
insert into `tbl_percobaan` (`id`, `nama`, `alamat`) values('8','Ica','Surabaya');
insert into `tbl_percobaan` (`id`, `nama`, `alamat`) values('9','Martin','Lampung');
insert into `tbl_percobaan` (`id`, `nama`, `alamat`) values('10','Lufti','Manado');
insert into `tbl_percobaan` (`id`, `nama`, `alamat`) values('11','Lendro','Balikpapan');

2. Implentasi pada HTML+PHP

Implementasi plugin saya buat pada php dengan tampilan data pada table silakan buat nama file php sesuai kesukaan anda, dan buat seperti dibawah ini.

<?php
//line koneksi ke database
// akses database MySQL menggunakan PDO:
$pdo = new PDO('mysql:host=localhost;dbname=db_tes_skrip', 'root', 'scripterror');
$statement = $pdo->prepare("SELECT * FROM tbl_percobaan");
$statement->execute();
?>
<!DOCTYPE html>
<html>
<head>
<title>Paging Data Pada Table menggunakan plugin dataTables</title>
<link rel="stylesheet" type="text/css" href="./media/css/jquery.dataTables.css">   <!-- memanggil datatables css nya-->
<script type="text/javascript" charset="utf8" src="./media/jquery.min.js"></script> <!-- memanggil jquery js -->
<script type="text/javascript" charset="utf8" src="./media/js/jquery.dataTables.js"></script> <!-- memanggil datatables js -->
<script>
$(document).ready( function () {
    $('#table_id').DataTable();   //fungsi standart datatable tidak memiliki configurasi fitur sama sekali dan fungsi datatables saya buat pada id table_id. jadi silakan disisipkan pada tabel. Dan jika ingin menambahkan fungsi option bisa ditambah pada baris ini setelah tanda buka kurung. 
} );
</script>
</head>
<body>

<table id="table_id"> 
<thead>
 <tr>
  <th>No</th>
  <th>Nama</th>
  <th>Alamat</th>
 </tr>
</thead>
<tbody>
<?php
$no=0;
while($data=$statement->fetch()){
$no++;
?>
 <tr>
  <td><?=$no?></td>
  <td><?=$data['nama']?></td>
  <td><?=$data['alamat']?></td>
 </tr>
 <? }?>
</tbody>
</table>
</body>
</html>

Perlu di ketahui dalam membuat struktur table kita harus menulis lengkap struktur tabel yang lengkap seperti thead dan tbody.

Selain fitur paging datatable juga sudah dilengkapi fitur pencarian dan pencarian sudah menggunakan ajax. Jadi keren deh pokoknya. Demo dan Download bisa dilihat pada link dibawah. Sekian dan terimakasih

Postingan Terkait
» IDE Editor PHP yang Powerfull dan lisensi free ( 15 Jul 2015 | 03:04:38 , 3750 hits )
» Membuat fungsi konversi mata uang Rupiah pada PHP ( 28 Apr 2014 | 07:05:47 , 7065 hits )
» Insert Data menggunakan jQuery, Ajax dan PHP ( 22 Apr 2014 | 09:03:31 , 5790 hits )
» Mengatasi Fatal error: Call to undefined function curl_init() in D: pada WAMP Server ( 10 Mar 2014 | 06:20:36 , 3166 hits )
» Fungsi PHP mengubah format tanggal Mysql menjadi format tanggal Indonesia ( 17 Jan 2014 | 07:50:24 , 13191 hits )