Cara Membuat Layout Multiple Table Dan Datatable

Halo teman – teman semuanya, kembai lagi di website tips dan trik seputar dunia website. Pada kesempatan kali ini saya akan memberikan tips tentang Cara Membuat Layout Multiple Table Dan Datatable, untuk case adalah kita akan coba membuat tampilan report data event.

Di dalam laporan tersebut terdapat informasi – informasi semua data event, dalam pembuatan laporan report ini kita akan menggunakan table dan juga datatable. Nah pada layout table ini kita akan menggunakan 2 table, table yang pertama kita gunakan sebagai wrapper atau pembugkus dan table yang ke 2 akan kita gunakan untuk datatable. Untuk layout yang akan kita buat bisa teman – teman lihat pada gambar di bawah ini

Cara Membuat Layout Multiple Table Dan Datatable

Baik langsung saja kita implementasikan, pertama kita load terlebih dahulu link bootstrap dan link datatable nya

//link css
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">

//link JS
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>

Kemudian kita buat table nya

<table class="table table-striped table-bordered">
    <tr>
      <th style="width: 30%">Judul Event</th>
      <td>Mengenal Industri 4.O</td>
    </tr>
    <tr>
      <th style="width: 30%">Lokasi Acara</th>
      <td>Halaman Monas</td>
    </tr>
    <tr>
      <th style="width: 30%">Kuota Peserta</th>
      <td>5 Peserta</td>
    </tr>
    <tr>
      <th style="width: 30%">Total Peserta Daftar</th>
      <td>4 Peserta</td>
    </tr>
    <tr>
      <th style="width: 30%">Kuota Peserta Yang Tersedia</th>
      <td>1 Peserta</td>
    </tr>
    <tr>
      <td colspan="2"><h3 class="text-center bg-primary text-white p-3">Data Peserta</h3></td>
    </tr>
</table>

Kemudian kita tambahkan lagi tag tr dan td nya kemudian berikan colspan sebanyak 2, yang di dalamnya kita tambahkan tag table yang akan kita install datatable nya

<tr>
      <td colspan="2">
        <table id="example" class="table table-striped table-bordered">
          <thead>
            <tr>
              <th>#</th>
              <th>Nama Peserta</th>
              <th>Nomor Telepon</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Maria Anders</td>
              <td>0812998090</td>
            </tr>
            <tr>
              <td>2</td>
              <td>Francisco Chang</td>
              <td>0812998090</td>
            </tr>
            <tr>
              <td>3</td>
              <td>Roland Mendel</td>
              <td>0812998090</td>
            </tr>
            <tr>
              <td>4</td>
              <td>Helen Bennett</td>
              <td>0812998090</td>
            </tr>
            </tbody>
        </table>
      </td>
    </tr>

Kemudian kita aktifkan datatable nya yang kita berikan id example pada table nya

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

Save dan jalakan pada browsernya, hasilnya seperti gambar di bawah ini

Untuk script lengkapnya bisa lihat di bawah ini

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
</head>
<body>

<div class="container">
<h2>HTML Table</h2>
  <table class="table table-striped table-bordered">
    <tr>
      <th style="width: 30%">Judul Event</th>
      <td>Mengenal Industri 4.O</td>
    </tr>
    <tr>
      <th style="width: 30%">Lokasi Acara</th>
      <td>Halaman Monas</td>
    </tr>
    <tr>
      <th style="width: 30%">Kuota Peserta</th>
      <td>5 Peserta</td>
    </tr>
    <tr>
      <th style="width: 30%">Total Peserta Daftar</th>
      <td>4 Peserta</td>
    </tr>
    <tr>
      <th style="width: 30%">Kuota Peserta Yang Tersedia</th>
      <td>1 Peserta</td>
    </tr>
    <tr>
      <td colspan="2"><h3 class="text-center bg-primary text-white p-3">Data Peserta</h3></td>
    </tr>
    <tr>
      <td colspan="2">
        <table id="example" class="table table-striped table-bordered">
          <thead>
            <tr>
              <th>#</th>
              <th>Nama Peserta</th>
              <th>Nomor Telepon</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Maria Anders</td>
              <td>0812998090</td>
            </tr>
            <tr>
              <td>2</td>
              <td>Francisco Chang</td>
              <td>0812998090</td>
            </tr>
            <tr>
              <td>3</td>
              <td>Roland Mendel</td>
              <td>0812998090</td>
            </tr>
            <tr>
              <td>4</td>
              <td>Helen Bennett</td>
              <td>0812998090</td>
            </tr>
            </tbody>
        </table>
      </td>
    </tr>
  </table>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('#example').DataTable();
} );
</script>
</body>
</html>

Baiklah, sekian tips dan trik tentang Cara Membuat Layout Multiple Table Dan Datatable. Teman – teman dapat gunakan ini untuk report data laporan, terutama teman – teman yang masih awam tentang table html dan cara kolaborasikan datatable dan 2 table. Tentu kita akan jumpa kembali di artikel selanjutnya, terimakasih dan sampai jumpa.