Menampilkan data dari database merupakan hal dasar yang harus dikuasai oleh para Developer atau Programmer sebuah aplikasi. Jika hanya sekedar mnampilkan data dalam bentuk tabel, penulis yakin akan sangat mudah dilakukan walaupun seorang programmer pemula. Akan tetapi "persoalan" bertambah jika sebuah aplikasi membutuhkan program yang dapat melakukan searching ( pencarian data ), paging ( membagi data yang ditampilkan ), serta shorting ( pengurutan data ) jika dilakukan dengan script PHP sangatlah bisa namun cukup menyulitkan. Dalam artikel kali ini penulis akan memberitahukan "jurus" yang sangat mudah untuk menampilkan, searching, paging serta shorting data dengan menggunakan jQuery DataTables.
source code :
<html>
<head>
<link rel="stylesheet" media="screen" href="css/jquery.dataTables.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.js"></script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>No</th>
<th>Nim Mahasiswa</th>
<th>Nama Mahasiswa</th>
<th>Alamat Mahasiswa</th>
</tr>
</thead>
<tbody>
<?php
include "koneksi.php";
/// variabel untuk nomor
$i=1;
$select="select * from mahasiswa";
$q=mysql_query($select);
while($data=mysql_fetch_array($q)){
?>
<tr>
<td align="center"><?php echo $i; ?></td>
<td align="center"><?php echo $data["nim_mahasiswa"] ?></td>
<td><?php echo $data["nm_mahasiswa"] ?></td>
<td><?php echo $data["alamat_mahasiswa"] ?></td>
</tr>
<?php
//// looping variabel untuk nomor
$i++;
}
?>
</tbody>
</table>
<script>
/// jquery untuk dataTable
$(document).ready(function() {
$('#example').dataTable();
});
</script>
</body>
</html>
tampilan Datatables adalah sebagai berikut :
Untuk file lengkapnya download disini , jika ingin melihat dokumentasi lengkap dari DataTables silahkan klik disini.
Data mahasiswa jika ingin mencoba tutorial ini
CREATE TABLE IF NOT EXISTS `mahasiswa` (
`id_mahasiswa` int(11) NOT NULL AUTO_INCREMENT,
`nim_mahasiswa` int(6) NOT NULL,
`nm_mahasiswa` varchar(50) NOT NULL,
`alamat_mahasiswa` varchar(250) NOT NULL,
PRIMARY KEY (`id_mahasiswa`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=13 ;
--
-- Dumping data for table `mahasiswa`
--
INSERT INTO `mahasiswa` (`id_mahasiswa`, `nim_mahasiswa`, `nm_mahasiswa`, `alamat_mahasiswa`) VALUES
(1, 123456, 'ADI SANTOSO', 'JL. KEBRAON NO.23'),
(2, 123457, 'ANDIKA ', 'JL. SURABAYA-MADIUN NO.12'),
(3, 123458, 'YUSUH ACHMADI', 'JL. KANAL TIMUR NO.23'),
(4, 123459, 'ARIS', 'JL. KALIANAK'),
(5, 123460, 'CAHYO NUGROHO', 'JL. MAULINAKAN NO.43'),
(6, 123461, 'ARIF', 'JL. KEDURUS NO.344'),
(7, 123462, 'ACHMAD', 'JL. DIPONEGORO NO.11'),
(8, 123463, 'FAUZI', 'JL KALI RUNGKUT NO.98'),
(9, 123464, 'RIMA INAYATI', 'JL. WARUGUNUNG NO.65'),
(10, 123465, 'BAGUS', 'JL. KEDURUS'),
(11, 123466, 'HAMZAH', 'JL. BENGAWAN SOLO NO.IX'),
(12, 123467, 'RARUK', 'JL. KANAL BARAT NO.45');
Disamping kemudahan dan kelebihan menggunakan DataTables yang penulis sebutkan diawal artikel, ada kekurangan juga tentunya jika menggunakan DataTables dalam menampilkan sebuah data dalam bentuk tabel yaitu jika data yang dtampilkan mencapai puluhan ribu record maka web browser akan lama meload halaman bahkan bisa sampai dengan crash. Sekali lagi semua ada kelebihan dan kekuragan tergantung cerdiknya sang developer menutupi kekurangan tersebut.
<head>
<link rel="stylesheet" media="screen" href="css/jquery.dataTables.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.js"></script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>No</th>
<th>Nim Mahasiswa</th>
<th>Nama Mahasiswa</th>
<th>Alamat Mahasiswa</th>
</tr>
</thead>
<tbody>
<?php
include "koneksi.php";
/// variabel untuk nomor
$i=1;
$select="select * from mahasiswa";
$q=mysql_query($select);
while($data=mysql_fetch_array($q)){
?>
<tr>
<td align="center"><?php echo $i; ?></td>
<td align="center"><?php echo $data["nim_mahasiswa"] ?></td>
<td><?php echo $data["nm_mahasiswa"] ?></td>
<td><?php echo $data["alamat_mahasiswa"] ?></td>
</tr>
<?php
//// looping variabel untuk nomor
$i++;
}
?>
</tbody>
</table>
<script>
/// jquery untuk dataTable
$(document).ready(function() {
$('#example').dataTable();
});
</script>
</body>
</html>
tampilan Datatables adalah sebagai berikut :
Untuk file lengkapnya download disini , jika ingin melihat dokumentasi lengkap dari DataTables silahkan klik disini.
Data mahasiswa jika ingin mencoba tutorial ini
CREATE TABLE IF NOT EXISTS `mahasiswa` (
`id_mahasiswa` int(11) NOT NULL AUTO_INCREMENT,
`nim_mahasiswa` int(6) NOT NULL,
`nm_mahasiswa` varchar(50) NOT NULL,
`alamat_mahasiswa` varchar(250) NOT NULL,
PRIMARY KEY (`id_mahasiswa`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=13 ;
--
-- Dumping data for table `mahasiswa`
--
INSERT INTO `mahasiswa` (`id_mahasiswa`, `nim_mahasiswa`, `nm_mahasiswa`, `alamat_mahasiswa`) VALUES
(1, 123456, 'ADI SANTOSO', 'JL. KEBRAON NO.23'),
(2, 123457, 'ANDIKA ', 'JL. SURABAYA-MADIUN NO.12'),
(3, 123458, 'YUSUH ACHMADI', 'JL. KANAL TIMUR NO.23'),
(4, 123459, 'ARIS', 'JL. KALIANAK'),
(5, 123460, 'CAHYO NUGROHO', 'JL. MAULINAKAN NO.43'),
(6, 123461, 'ARIF', 'JL. KEDURUS NO.344'),
(7, 123462, 'ACHMAD', 'JL. DIPONEGORO NO.11'),
(8, 123463, 'FAUZI', 'JL KALI RUNGKUT NO.98'),
(9, 123464, 'RIMA INAYATI', 'JL. WARUGUNUNG NO.65'),
(10, 123465, 'BAGUS', 'JL. KEDURUS'),
(11, 123466, 'HAMZAH', 'JL. BENGAWAN SOLO NO.IX'),
(12, 123467, 'RARUK', 'JL. KANAL BARAT NO.45');
Disamping kemudahan dan kelebihan menggunakan DataTables yang penulis sebutkan diawal artikel, ada kekurangan juga tentunya jika menggunakan DataTables dalam menampilkan sebuah data dalam bentuk tabel yaitu jika data yang dtampilkan mencapai puluhan ribu record maka web browser akan lama meload halaman bahkan bisa sampai dengan crash. Sekali lagi semua ada kelebihan dan kekuragan tergantung cerdiknya sang developer menutupi kekurangan tersebut.
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com
atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :
