Cara Mudah Menampilkan Data MySQL dengan DataTables

Cara Mudah Menampilkan Data MySQL dengan DataTables. Hai temen-temen sekalian, maaf banget ya karena update tutorialnya sangat-sangat lambat, karena masih banyak kesibukan

. Di waktu senggang ini tutorialweb.net akan mencoba membuat sebuah tutorial sederhana tapi ini akan sangat-sangat bermanfaat bagi temen-temen semua (ngarep banget ini, hehehe). Temen-temen pasti pernah kan menampilkan data dari database MySQL tentunya di tampilkan dalam bentuk tabel seperti pada tutorial sebelumnya. Nah table itu kalau sudah banyak data (ratusan bahwan ribuan) maka tampilannya akan tidak indah dipandang mata karena data banyak turrrrruuuuunn kebawah sampai ratusan bahkan ribuan, jalannya adalah dengan menambahkan script pagination (halaman) pada halaman web sobat, cukup ribet pulan menambahkannya kan, seperti pada tutorial sebelumnya juga ada tentang membuat Simple pagination. Tapi sobat tenang aja, sekarang sudah ada yang namanya DataTables yang dapat sangat-sangat memudahkan pekerjaan sobat dalam hal menampilkan data dari database MySQL.
Beberapa fitur DataTables adalah bisa merubah langsung data sobat yang asalnya Table biasa bisa menjadi Table yang sudah ada pagination, sudah ada pencarian data, dan juga ada pilihan mau berapa banyak data yang di tampilkan perhalamannya. Mantaf bukan, tanpa perlu ribet paket script pagination atau pencarian sudah langsung bisa di gunakan.
Halah sudah lah basa basinya (biasanya gak pernah panjang gini), kita langsung aja ya tutorialnya…. cekidot…

Oke, pertama silahkan mampir ke website http://datatables.net untuk lihat-lihat.
Yang kedua kita butuh database dan yang terisi banyak data agar nanti bisa terlihat gimana datatables ini bekerja, karena butuh banyak data maka saya gunakan aja database yang sudah ada di phpMyAdmin, yaitu database mysql, dan table yang saya gunakan adalah table help_keyword, di situ sudah ada ratusan data yang masuk.
Ketiga dalam file kita nanti akan di Inlcude-kan 3 buah file, yaitu 2 file dari DataTables (css dan js) dan 1 file jquery (js), ini kita langsug ambil dari websitenya aja (cdn), berikut ini linknya:

//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css
//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js
http://code.jquery.com/jquery-1.12.0.min.js

//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css

//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js

http://code.jquery.com/jquery-1.12.0.min.js

Oke link sumber sudah ada, tinggal kita proses pembuatannya, silahkan buat file dengan nama index.php kemudian ketikkan (copy paste aja deh) kode di bawah ini:

<!DOCTYPE html>
<html>
<head>
 <title>Simple DataTables</title>
 <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
</head>
<body>

 <h1>
Data Datatables</h1>
<table id="dataTables" class="display" cellspacing="0" width="100%">
        <thead>
<tr>
                <th>NO.</th>
                <th>ID</th>
                <th>NAME</th>
                <th>OPTION 1</th>
                <th>OPTION 2</th>
                <th>OPTION 3</th>
                <th>OPTION 4</th>
            </tr>
</thead>
  
  <tbody>
   <?php
   $conn = new mysqli("localhost", "root", "", "mysql");
   if ($conn->connect_errno) {
    echo "Failed to connect to MySQL: " . $conn->connect_error;
   }
   
   $no = 1;
   $res = $conn->query("SELECT * FROM help_keyword");
   while($row = $res->fetch_assoc()){
    echo '
<tr>
     <td>'.$no.'</td>
     <td>'.$row['help_keyword_id'].'</td>
     <td>'.$row['name'].'</td>
     <td>Hanya Pilihan '.$no.'</td>
     <td>Hanya Pilihan '.$no.'</td>
     <td>Hanya Pilihan '.$no.'</td>
     <td>Hanya Pilihan '.$no.'</td>
    </tr>
';
    $no++;
   }
   ?>
  </tbody>
  <tfoot>
<tr>
                <th>NO.</th>
                <th>ID</th>
                <th>NAME</th>
                <th>OPTION 1</th>
                <th>OPTION 2</th>
                <th>OPTION 3</th>
                <th>OPTION 4</th>
            </tr>
</tfoot>
 </table>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
 <script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
 <script>
 $(document).ready(function() {
  $('#dataTables').DataTable();
 } );
 </script>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Simple DataTables</title>

</head>

<body>

<h1>Data Datatables</h1>

<thead>

<tr>

<th>OPTION 1</th>

<th>OPTION 2</th>

<th>OPTION 3</th>

<th>OPTION 4</th>

</tr>

</thead>

<tbody>

<?php

$conn = new mysqli("localhost", "root", "", "mysql");

if ($conn->connect_errno) {

echo "Failed to connect to MySQL: " . $conn->connect_error;

}

$no = 1;

$res = $conn->query("SELECT * FROM help_keyword");

while($row = $res->fetch_assoc()){

echo '

<tr>

<td>'.$row['help_keyword_id'].'</td>

<td>Hanya Pilihan '.$no.'</td>

</tr>

$no++;

}

</tbody>

<tfoot>

<tr>

<th>OPTION 1</th>

<th>OPTION 2</th>

<th>OPTION 3</th>

<th>OPTION 4</th>

</tr>

</tfoot>

</table>

$(document).ready(function() {

$('#dataTables').DataTable();

} );

</script>

</body>

</html>

Nah, sudah selesai. Silahkan di buka di browser sobat. Pastikan pakek Localhost dan terkoneksi internet ya. Kalau sudah kayak gambar di bawah ini berarti sudah berhasil, lihat sudah ada pagination dan pencarian dengan jQuery kan.
https://www.blogger.com/blogger.g?blogID=6144514048309955111#editor/target=post;postID=1705208673861298685 datatables simple

Waah,,, mantap ya.. oh ya untuk kolom OPTION 1 sampek OPTION 4 itu bukan dari database ya, itu saya masukkan untuk pelengkap aja, kan gak enak kalau cuma 2 kolom aja yang masuk, gak enak di pandang mata..

Nah loo.. cuma itu ni gak di jelasin tentang script di atas..
Hahahahaa… oke deh di jelasin sedikit ya, hanya itinya aja…

Baris ke 5, 61, 62 : ini adalah include script dari DataTables dan jQuery nya langsung, jadi harus terkoneksi internet ya.
Baris ke 64-66 : adalah script yang digunakan untuk mengkonversi table biasa kita menjadi table DataTables jQuery kayak gambar di atas, nah cara rubahnya gimana? Perhatikan baris ke 65, ada script #dataTables dan baris ke 10 ada script id=“dataTables”, maksudnya dimana setiap ada Table diberi id dataTables, maka akan secara otomatis di konversi manjadi tampilan DataTables jQuery.
Baris 24-46 : Scrip perulangan sederhana untuk menampilkan data dari database, ini sudah ada di setiap tutorial, jadi gak usah dijelaskan lebih detail.

Sudah ada pencerahan sobat? mudah-mudahan bisa membantu, terima kasih sudah berkunjung dan jangan lupa klik iklannya ya.. hehehe (ngarep bingits). Sampai jumpa.
Kalau pengen mudah, dan bisa dicoba offline (tanpa internet) bisa di download di bawah ini.
Download

http://link.tutorialweb.net/?link=https://app.box.com/s/m366qeq9tb5ix3vb7bjlv11s830gcwqc

password:www.tutorialweb.net

Ell Software

Popular Posts

Cara Mudah Menampilkan Data MySQL dengan DataTables

About Unknown

0 comments:

Post a Comment

Recent comments

Find Us On Facebook

Popular Posts

Cara Mudah Menampilkan Data MySQL dengan DataTables

About Unknown

RELATED POSTS

0 comments:

Post a Comment

Find Us On Facebook