Menampilkan Data dengan PHP, MySQL dan DataTables

PHP, Tutorial - 15 Jul 2014

DataTables merupakan plugin jQuery yang diperuntukkan untuk menampilkan data kedalam tabel secara interaktif. Berbagai fitur dapat Anda dapatkan hanya dengan memanfaatkan plugin ini. Diantaranya ialah fitur sortir data, pencarian data, pagination serta fitur lainnya yang bisa Anda gunakan. Untuk melihat lebih detail, silahkan cek demo dibawah.

Langkah 1

Siapkan tabel dan data yang akan ditampilkan. Pada contoh berikut, kita akan menampilkan data karyawan. Maka buatlah tabel karyawan dengan field sebagai berikut :

CREATE TABLE `karyawan` (
 `id_karyawan` int(2) NOT NULL AUTO_INCREMENT,
 `nama` varchar(255) NOT NULL,
 `jk` enum('Pria','Wanita') NOT NULL,
 `jabatan` varchar(255) NOT NULL,
 `penempatan` varchar(255) NOT NULL,
 PRIMARY KEY (`id_karyawan`)
) 

Kemudian, isikan dengan beberapa data. Anda dapat mengambil contoh yang sudah disiapkan pada link download diatas.

Langkah 2

Buatlah koneksi ke database MySQL. Pada contoh berikut, koneksi database diletakkan pada file config.php.

<?php
define("HOST", "localhost"); // Host database
define("USER", "root"); // Usernama database
define("PASSWORD", ""); // Password database
define("DATABASE", "belajar"); // Nama database

$condb = mysql_connect(HOST,USER,PASSWORD);
$mysql = mysql_select_db(DATABASE,$condb);
?>

Langkah 3

Selanjutnya, buatlah sebuah file dengan nama index.php. File ini digunakan untuk menampilkan data karyawan dari database MySQL. Berikut perintahnya :

<table id="contoh">
  <thead>
   <tr>
        <th>No</th>
       <th>Nama Karyawan</th>
        <th>Jenis Kelamin</th>
        <th>Jabatan</th>
        <th>Penempatan</th>
   </tr>
 </thead>

  <tbody>
 <?php
  $no = 1;
  $query = mysql_query("SELECT * FROM karyawan ORDER BY nama ASC");
 while($data = mysql_fetch_array($query)){
   echo "<tr>";
    echo "<td>$no";
   echo "<td>$data[nama]</td>";
    echo "<td>$data[jk]</td>";
    echo "<td>$data[jabatan]</td>";
   echo "<td>$data[penempatan]</td>";
    echo "</tr>";
   $no++;
  }
 ?>
 </tbody>
</table>

Catatan :

Jangan lupa untuk memberi id pada tabel yang digunakan untuk menampilkan data. Pada contoh diatas tabel diberi id contoh. id tabel ini nantinya akan kita gunakan untuk menghubungkan tabel HTML dengan plugin DataTables.

Langkah 4

Agar tabel dapat terhubung dengan plugin DataTables download terlebih dahulu plugin DataTables. Setelah men-download dan meng-ekstrak plugin tersebut, ambil-lah 2 file pendukung yang ada di folder media. File tersebut ialah file jquery.dataTables.css yang ada di folder css dan file jquery.dataTables.js yang ada di folder js.

Kemudian, masukkan ke-2 file tersebut kedalam project web Anda. Karena kita menampilkan data pada file index.php maka hubungkan ke-2 file tersebut kedalam file index.php. Sebagai contoh :

<html>
<head>
<link rel="stylesheet" href="jquery.dataTables.css"> <!-- Memasukkan file jquery.dataTables.css -->
</head>
<body>
<table id="contoh">
 <thead>
   <tr>
        <th>No</th>
       <th>Nama Karyawan</th>
        <th>Jenis Kelamin</th>
        <th>Jabatan</th>
        <th>Penempatan</th>
   </tr>
 </thead>

  <tbody>
 <?php
  $no = 1;
  $query = mysql_query("SELECT * FROM karyawan ORDER BY nama ASC");
 while($data = mysql_fetch_array($query)){
   echo "<tr>";
    echo "<td>$no";
   echo "<td>$data[nama]</td>";
    echo "<td>$data[jk]</td>";
    echo "<td>$data[jabatan]</td>";
   echo "<td>$data[penempatan]</td>";
    echo "</tr>";
   $no++;
  }
 ?>
 </tbody>
</table>
<script src="jquery.dataTables.js"></script> <!-- Memasukkan file jquery.dataTables.js -->
</body>
</html>

Langkah 5

Dikarenakan plugin DataTables dibuat menggunakan jQuery, maka jangan lupa untuk memasukkan plugin jQuery pada file index.php serta tuliskan perintah berikut pada file index.php :

$(document).ready(function() {
    $('#contoh').dataTable(); // Menjalankan plugin DataTables pada id contoh. id contoh merupakan tabel yang kita gunakan untuk menampilkan data
} );

Kode akhir file index.php

<?php include('config.php');?>
<html>
<head>
<link rel="stylesheet" href="jquery.dataTables.css"> <!-- Memasukkan file jquery.dataTables.css -->
</head>
<body>
<table id="contoh">
  <thead>
   <tr>
        <th>No</th>
       <th>Nama Karyawan</th>
        <th>Jenis Kelamin</th>
        <th>Jabatan</th>
        <th>Penempatan</th>
   </tr>
 </thead>

  <tbody>
 <?php
  $no = 1;
  $query = mysql_query("SELECT * FROM karyawan ORDER BY nama ASC");
 while($data = mysql_fetch_array($query)){
   echo "<tr>";
    echo "<td>$no";
   echo "<td>$data[nama]</td>";
    echo "<td>$data[jk]</td>";
    echo "<td>$data[jabatan]</td>";
   echo "<td>$data[penempatan]</td>";
    echo "</tr>";
   $no++;
  }
 ?>
 </tbody>
</table>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <!-- Memasukkan plugin jQuery -->
<script src="jquery.dataTables.js"></script> <!-- Memasukkan file jquery.dataTables.js -->
<script>
$(document).ready(function() {
    $('#contoh').dataTable(); // Menjalankan plugin DataTables pada id contoh. id contoh merupakan tabel yang kita gunakan untuk menampilkan data
} );
</script>
</body>
</html>

Kesimpulan

Dengan plugin DataTables, menampilkan data dengan PHP dan MySQL kedalam bentuk tabel akan terlihat lebih baik. Dikerenakan berbagai fitur utama sudah tersedia. Diantaranya seperti sortir data, pencarian data, dan pagination. Semoga bermanfaat.

Baca Juga :
Membuat Pencarian Facebook dengan jQuery dan PHP
Membuat Dynamic Select Box Menggunakan jQuery dan Ajax
Membuat Fitur Read More dengan PHP
Membuat Laporan Excel dengan PHP dan MySQL



  • Chairul Ramadhan

    nice tutorial om, permasalahan datatable ketika data melebihi 1000 maka akan terasa effect renderingnya, bagimana cara mengatasi hal tsb?

  • Nabil

    gan, ane punya masalah ketika menampilkan data gambar menggunakan mysql_fetch_object, seluruh datanya tampil, sehingga pagination, searching, dsb tidak berfungsi, bagaimana cara mengatasinya ??

    • Shrusnya tdk ada mslah, krn smua fitur datatables blm berhubungan lgsg dgn printah PHP. Pstikan id tablenya sdh dipggil dgn prnth jquery sprti cnth diatas.

  • dino

    Salam kenal bang.

    Mohon pencerahan, knp ya datatablenya ngga muncul ya bang di browser saat saya jalanKan. Hanya muncul tabel biasa. Semua code sudah saya ikuti dengan baik. Apakah browsernya
    yang error atau ada sesuatu yang saya belum tau ya bang.
    Terima kasih.

    • Coba agan buka link demo diatas, kalau bisa berarti browser agan tidak ada yang salah.

      Pastikan id table agan sudah di panggil pada perintah datatables-nya seperti pada langkah ke-5. Dan plugin jquery jangan lupa dimasukkan juga.

      • dino

        Sudah saya download juga demo dari abang. Sudah saya coba Tapi hasilnya tetap sama bang. Saya bingung knp ya?

        • Kalau di demo plugin jQuery menggunakan yg online. Apa ada koneksi internet ketika di buka ?

          kalau demo onlinenya yg di url ini http://demo.eplusgo.com/datatables/ apakah bisa tampil ?

          • dino

            Oh kalo yang demo online bisa tampil gan. Tapi kalo yang link download dari abang itu ngga bisa tampil. Sepertinya yang di link donwload ada file yang kurang bang. Plugin jquery nya ngga ada. (Jquery-1.10.2.min.js).

          • Iya, yg didemo jQuerynya online. Yaudah, agan download aja jQuerynya.

          • dino

            Bang,

            Sudah saya download. saya masukan, tapi masih belum mau juga. Ada solusi lagi ngga bang?

          • Ponco

            mungkin bisa dari “src=” nya gan klo gak salah tempat link file jQuernya. . klo gak salah sih om ?