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.
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
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>
#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/
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>
Alternatif Plug-in Table
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.