...

Membuat Tabel Bootstrap 4 dengan Plugin Datatable

Beberapa kelebihan yang didapat dengan meng-integrasikan Datatable dengan Bootstrap 4 adalah dapat menampilkan pagination tabel, sorting kolom, filter data dan record per page. Berikut contoh tampilan Tabel Bootstrap 4 dengan Datatable

Pertama mari kita tambahkan Datatable CSS dan JS pada dokumen HTML kita, sbb :

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css"/>

dan 

<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 untuk tabel ditempatkan dalam komponen Card dan Container, sebagai berikut :

<div class="container">
          <div class="row">
              <div class="col-sm-12">
                  <div class="card">
                      <h5 class="card-header">Daftar Siswa</h5>
                      <div class="card-body">
                          <table id="tabel-siswa" class="table table-striped table-bordered" style="width:100%">
                              <thead>
                                  <tr>
                                      <th>NIM</th>                  
                                      <th>Nama</th>
                                      <th>Jurusan</th>																		
                                  </tr>
                              </thead>						
                              <tbody>
                                  <tr>
                                      <td>100992002</td>
                                      <td>Budi Santoso</td>
                                      <td>Teknik Informatika</td>                  
                                  </tr>
                                  <tr>
                                      <td>100992004</td>
                                      <td>Susi Susanti</td>
                                      <td>Teknik Informatika</td>                  
                                  </tr>              
                              </tbody>
                          </table>                          
                      </div>
                      <div class="card-footer">
                          <button class="btn btn-primary btn-sm" type="button">Tambah</button>
                          <button class="btn btn-secondary btn-sm" type="button">Edit</button>
                      </div>
                        
                  </div>
              </div>
          </div>
      </div>

Terakhir kita gunakan id tabel untuk ditetapkan sebagai datatable :

<script>
    $('#tabel-siswa').dataTable({
      'autoWidth': false,
      'aoColumnDefs': [{'bSortable': false,'aTargets': [0]}],
      'aaSorting': []
    });
</script>