Beranda
Blogger
Tips

Cara Membuat Tabel Menggunakan jQuery DataTables

Cara membuat tabel dinamis menggunakan plug-in jQuery DataTables mulai dari menginstal dan menampilkan dataTables responsive.
Jquery DataTables

Ada banyak table library atau plugin untuk membuat tabel pada sistem berbasis web, salah satunya adalah Plug-in jQuery DataTables.

Dengan memanfaatkan DataTables kita bisa menghemat waktu untuk membuat tabel dinamis yang terintegrasi dengan fitur searching dan pagination, dan banyak lagi.

Pada artikel kali ini kita akan membahas tutorial cara membuat tabel menggunakan plug-in jQuery DataTables mulai dari menginstal dan menampilkan data tabel.

Table of Contents

Mengenal library jQuery DataTables

DataTables merupakan plug-in jQuery yang menyediakan fungsi untuk menampilkan dan memanipulasi tabel HTML. Ini menawarkan fitur penyortiran, pencarian, paginasi, mengambil data dari sisi server dan banyak lagi.

Membuat Tabel Dengan DataTables

Demo DataTables Demo DataTables Bootstrap

Instal DataTables dengan CDN

Langkah pertama kita perlu menghubungkan file library DataTables kedalam web. Bisa dilakukan secara online atau offline.

Untuk cara online salin dan pase kode berikut di atas tag </head>.

<link href='https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js'></script>
<script src='https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js'></script>

Jika ingin menggunakan offline, download terlebih dahulu file library DataTables di https://datatables.net/download/index. Lalu ganti nilai src dengan alamat Patch-nya.

<link href='assets/css/jquery.dataTables.min.css' rel='stylesheet'/>
<script src='assets/js/jquery-3.7.1.min.js'></script>
<script src='assets/js/jquery.dataTables.min.js'></script>

Kemudian tambahkan script berikut tepat dibawah file library DataTables diatas tadi untuk memanggil fungsi DataTables.

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

Keterangan:

  • #data-table kata kunci tersebut untuk memilih tabel dengan ID data-tabel
  • .DataTable() memanggil fungsi DataTables

Membuat Tabel DataTables

Setelah proses instal selesai, sekarang bagaimana membuat dan menampilkan data tabel tersebut?

Di dalam editor postingan atau halaman buat sebuah element table HTML. Berikut contohnya

<table id="data-table" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011-04-25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011-07-25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009-01-12</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012-03-29</td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008-11-28</td>
      <td>$162,700</td>
    </tr>
    <tr>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>2012-12-02</td>
      <td>$372,000</td>
    </tr>
    <tr>
      <td>Herrod Chandler</td>
      <td>Sales Assistant</td>
      <td>San Francisco</td>
      <td>59</td>
      <td>2012-08-06</td>
      <td>$137,500</td>
    </tr>
    <tr>
      <td>Rhona Davidson</td>
      <td>Integration Specialist</td>
      <td>Tokyo</td>
      <td>55</td>
      <td>2010-10-14</td>
      <td>$327,900</td>
    </tr>
    <tr>
      <td>Colleen Hurst</td>
      <td>Javascript Developer</td>
      <td>San Francisco</td>
      <td>39</td>
      <td>2009-09-15</td>
      <td>$205,500</td>
    </tr>
    <tr>
      <td>Sonya Frost</td>
      <td>Software Engineer</td>
      <td>Edinburgh</td>
      <td>23</td>
      <td>2008-12-13</td>
      <td>$103,600</td>
    </tr>
    <tr>
      <td>Jena Gaines</td>
      <td>Office Manager</td>
      <td>London</td>
      <td>30</td>
      <td>2008-12-19</td>
      <td>$90,560</td>
    </tr>
    <tr>
      <td>Quinn Flynn</td>
      <td>Support Lead</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2013-03-03</td>
      <td>$342,000</td>
    </tr>
    <tr>
      <td>Charde Marshall</td>
      <td>Regional Director</td>
      <td>San Francisco</td>
      <td>36</td>
      <td>2008-10-16</td>
      <td>$470,600</td>
    </tr>
    <tr>
      <td>Haley Kennedy</td>
      <td>Senior Marketing Designer</td>
      <td>London</td>
      <td>43</td>
      <td>2012-12-18</td>
      <td>$313,500</td>
    </tr>
    <tr>
      <td>Tatyana Fitzpatrick</td>
      <td>Regional Director</td>
      <td>London</td>
      <td>19</td>
      <td>2010-03-17</td>
      <td>$385,750</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>
</table>

Perhatikan bagian <table id="data-table" class="display" style="width:100%">. Terdapat ID id="data-table", ini adalah ID yang sudah kita tentukan di dalam javascript untuk memanggil fungsi Datatables tadi.

Jika kita merubah ID pada javascript, untuk menampilkannya pada tabel ubah juga pada class ID pada element table HTML tersebut.

Responsive DataTables

Jika data memiliki banyak kolom maka akan terlihat berantakan dan sulit untuk dibaca, telebih jika dibuka pada tampilan dengan layar yang kecil seperti smartphone.

Lalu bagaimana agar DataTables responsive? Untuk menampilkan DataTables secara responsive kita hanya perlu menambahkan file javascript dan CSS responsive.

<link href='https://cdn.datatables.net/responsive/2.5.0/css/responsive.dataTables.min.css' rel='stylesheet'/>
<script src='https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js'></script>

Pada tahap kesatu kita sempat menambahkan javascript untuk memanggil fungsi DataTables, kemudian tambahkan nilai Responsive ke opsi DataTables Javascript tersebut seperti berikut :

<script>
$(document).ready(function () {
    $('#data-table').DataTable({
        responsive: true
    });
});
</script>

Lalu tambahkan class nowrap pada element table HTML :

<table id="data-table" class="display nowrap" style="width:100%">
   ...
</table>

Sebetulnya ada beberapa cara untuk membuat datatables responsive, kamu bisa membaca dokumentasi berikut https://datatables.net/extensions/responsive/examples/

Contoh DataTables

See the Pen Plug-in DataTables by inputekno (@inputekno) on CodePen.

Membuat Tabel DataTables dan Bootstrap

Kita juga bisa menggunakan Bootstrap agar tampilan tabel lebih menarik dilihat.

Untuk membuat tabel menggunakan Plug-in DataTables dengan tampilan tema bootstrap, kita hanya perlu menambahkan file library bootstrap berikut:

<!-- CSS DataTables Boostrap -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css' rel='stylesheet'/>
<link href='https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css' rel='stylesheet'/>
<!-- JS DataTables Boostrap -->
<script src='https://code.jquery.com/jquery-3.7.0.js'></script>
<script src='https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js'></script>
<script src='https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js'></script>

Kemudian pada element table HTML, ganti class table menjadi table table-striped, kode nya akan nampak seperti berikut :

<table id="data-table" class="table table-striped" style="width:100%">
   ...
</table>

DataTables Responsive Bootstrap

Untuk membuat datatables bootstap responsif kita cukup menambahkan file library responsive bootstrap berikut:

<link href='https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css' rel='stylesheet'/>
<script src='https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js'></script>
<script src='https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js'></script>

Lalu tambahkan class dt-responsive nowrap pada element table HTML :

<table id="data-table" class="table table-striped dt-responsive nowrap" style="width:100%">
   ...
</table>

kamu bisa membaca dokumentasi berikut https://datatables.net/extensions/responsive/examples/styling/bootstrap5.html

Contoh DataTables Bootstrap

See the Pen Plug-in DataTables by inputekno (@inputekno) on CodePen.

Alternatif Plug-in Table

Cara Buat Tabel Dinamis Menggunakan Gridjs di Blog - InpuTekno
Cara membuat tabel dinamis menggunakan library Grid.js di blog.
www.inputekno.comwww.inputekno.com

Penutup

Kamu juga dapat mempelajari Dokumentasi jQuery DataTables untuk melakukan optimasi tabel, mengambil data dari sisi server melalui AJAX, dan sebagainya.

Nah itu tadi Cara membuat tabel menggunakan jQuery DataTables. Semoga artikel ini bisa bermanfaat dan jika ada pertanyaan silakan tanyakan melalui komentar. Kamu juga bisa share dan rekomendasikan ke teman-teman yang membutuhkan.

Referensi Link:
#Keep Reading and Keep Working
Gabung dalam percakapan