Tutorial Mempercantik Table dengan Bootstrap dan Datatables

Selamat Sore kawan, Postingan kali ini atar request dari rekan saya Erick Wahyudi Prakoso di group PHP Indonesia.

Datatables adalah plugin untuk library jQuery Javascript.

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.

Dengan datatables kita tidak perlu bersusah-susah lagi membuat table yang lumayan ribet menurut saya, karena kita akan bikin pagination lagi juga mempermudah dalam melakukan pencarian di dalam tabel itu sendiri.

Kalian bisa lihat langsung contohnya di web datatables, tapi kali ini saya share bagaimana menerapkannya dengan digabungkan dengan Bootstrap.

Mari mulai:

Sebelumnya saya membagika script Cara Insert Update Delete Data Tanpa Loading Halaman dengan PHP dan jQuery kali ini saya lanjuti script yang ada di postingan itu dengan menambahkan Datatables pada tabelnya.

Pada file header.php saya menambahkan script ini :

    <script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.min.js"></script>    

Pada File getdata.php  saya tambahkan kode berikut:

<script type="text/javascript">
$(document).ready(function() {
    $('#example').DataTable();
} );
</script>

dan pada tabel saya ganti jadi ini

<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">

Untuk kode lengkapnya pada file getdata.php:

<script type="text/javascript">
$(document).ready(function() {
    $('#example').DataTable();
} );
</script>
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th>Kode</th>
        <th>Nama</th>
        <th>Gender</th>
        <th>Phone</th>
      <th>Alamat</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
<?php
include "config.php";
$res = $conn->query("select * from orang");
while ($row = $res->fetch_assoc()) {
?>
   
      <tr>
        <td><?php echo $row['kode']; ?></td>
        <td><?php echo $row['nama']; ?></td>
        <td><?php echo $row['gender']; ?></td>
        <td><?php echo $row['phone']; ?></td>
      <td><?php echo $row['alamat']; ?></td>
        <td>
        <a class="btn btn-warning btn-sm" data-toggle="modal" data-target="#myModal<?php echo $row['kode']; ?>"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
        <a class="btn btn-danger btn-sm" onclick="deletedata('<?php echo $row['kode']; ?>')"  ><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>

<!-- Modal -->
<div class="modal fade" id="myModal<?php echo $row['kode']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel<?php echo $row['kode']; ?>" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel<?php echo $row['kode']; ?>">Edit Data</h4>
      </div>
      <div class="modal-body">

<form>
  <div class="form-group">
    <label for="nm">Nama</label>
    <input type="text" class="form-control" id="nm<?php echo $row['kode']; ?>" value="<?php echo $row['nama']; ?>">
  </div>
  <div class="form-group">
    <label for="gd">Gender</label>
    <input type="text" class="form-control" id="gd<?php echo $row['kode']; ?>" value="<?php echo $row['gender']; ?>">
  </div>
  <div class="form-group">
    <label for="pn">Phone</label>
    <input type="text" class="form-control" id="pn<?php echo $row['kode']; ?>" value="<?php echo $row['phone']; ?>">
  </div>
  <div class="form-group">
    <label for="al">Alamat</label>
    <input type="text" class="form-control" id="al<?php echo $row['kode']; ?>" value="<?php echo $row['alamat']; ?>">
  </div>
 
</form>
     
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" onclick="updatedata('<?php echo $row['kode']; ?>')" class="btn btn-primary" data-dismiss="modal">Save changes</button>
      </div>
    </div>
  </div>
</div>
       
        </td>
      </tr>
<?php
}
?>
    </tbody>
      </table>

Selengkapnya bisa di lihat pada demo link dibawah ini:

DEMO | DOWNLOAD SOURCE CODE

Selamat mencoba kawan..

Tweet

Jangan sampai ketinggalan postingan-postingan terbaik dari Dedy Manado. Berlangganan melalui email sekarang juga:

Atau sobat juga bisa follow Dedy Manado dengan mengklik tombol di bawah ini:

Artikel keren lainnya:

Ditulis oleh Dedy Saputra pada tanggal Thursday, February 25, 2016