Tutorial Cara Menggunakan Plug-in Data Tables

 

1. Menyisipkan Data Tables

Plug-in Data Tables yang saya gunakan pada tulisan ini adalah versi online melalui CDN. Bila anda ingin menggunakan versi offline, silahkan di-download dulu Data Tables-nya di https://datatables.net/download/index. Berikut ini cara menyisipkan Data Tables melalui CDN.

<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 

<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

2. Kode HTML

Kode Tabel ini saya ambil dari web resmi data tables.

<section class="content">
      <div class="row">
        <div class="col-xs-12">
          <div class="box">
            <div class="box-header">
              <h3 class="box-title">Hover Data Table</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <table id="tabel-data" class="table table-bordered table-hover">
                <thead>
                <tr>
                  <th>Rendering engine</th>
                  <th>Browser</th>
                  <th>Platform(s)</th>
                  <th>Engine version</th>
                  <th>CSS grade</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                  <td>Trident</td>
                  <td>Internet
                    Explorer 4.0
                  </td>
                  <td>Win 95+</td>
                  <td> 4</td>
                  <td>X</td>
                </tr>
                <tr>
                  <td>Trident</td>
                  <td>Internet
                    Explorer 5.0
                  </td>
                  <td>Win 95+</td>
                  <td>5</td>
                  <td>C</td>
                </tr>
                <tr>
                  <td>Trident</td>
                  <td>Internet
                    Explorer 5.5
                  </td>
                  <td>Win 95+</td>
                  <td>5.5</td>
                  <td>A</td>
                </tr>
               </tfoot>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
         </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>

3. Persiapan Data Tables

Kita akan menerapkan Data Tables saat web di-load. taruh di footer

<script>
  $(document).ready(function(){
       $('#tabel-data').DataTable();
  });
</script>

Perhatikan #tabel-data, kata kunci tersebut untuk memilih tabel dengan ID tabel-data. Kemudian, method .DataTable() fungsinya untuk menerapkan Data Tables pada tabel yang dipilih.