Tutorial DataTables #1: HTML Sourced Data

Edy Kurniawan 02 Maret 2024

Seperti yang sudah dijelaskan pada tulisan sebelumnya. DataTables merupakan salah satu plugin jQuery yang populer untuk membuat tabel yang interaktif dan dapat disesuaikan dengan mudah dalam pengembangan web.

Dengan menggunakan DataTables, pengembang dapat menambahkan fitur-fitur seperti penyaringan, pencarian, pengurutan, dan halaman ke tabel HTML mereka dengan mudah.

Artikel ini akan memberikan panduan lengkap tentang cara menggunakan DataTables secara dasar untuk meningkatkan fungsionalitas tabel dalam proyek web.

Fungsionalitas tabel HTML dengan menambahkan fitur-fitur canggih seperti pencarian, penyaringan, pengurutan, dan halaman.

Dengan menggunakan DataTables, pengguna dapat dengan mudah berinteraksi dengan data yang ditampilkan dalam tabel, memungkinkan tampilan yang lebih terorganisir dan mudah dipahami.

Pada artikel ini kita akan berbagi tutorial bagaimana pengguanaan DataTables dengan HTML DOM Sourced Data.

Apa itu HTML DOM Sourced Data?

HTML DOM Sourced Data mengacu pada penggunaan DataTables di mana data yang ditampilkan dalam tabel berasal langsung dari elemen HTML di halaman.

Ini berarti kamu tidak perlu mengambil data dari sumber eksternal seperti server atau API. Sehingga data tersebut telah disediakan dalam markup HTML dan dapat diakses langsung melalui JavaScript.

Langkah-langkah Penggunaan DataTables dengan HTML DOM Sourced Data

Langkah pertama adalah memasukkan referensi ke library jQuery dan DataTables ke dalam halaman web kamu. Kamu dapat melakukannya dengan menambahkan baris-baris berikut di dalam tag <head>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.0.1/css/dataTables.dataTables.css">
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.datatables.net/2.0.1/js/dataTables.js"></script>

Buat tabel HTML di mana kamu ingin menampilkan data. Tambahkan atribut id yang nantinya sebagai selector pada fungsi jQuery untuk tabel tersebut.

Disini kita buat saja atributnya menjadi id="datatableExample" seperti dibawah ini

<table id="datatableExample" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Nama</th>
                <th>Posisi</th>
                <th>Kantor</th>
                <th>Umur</th>
                <th>Tanggal Mulai</th>
                <th>Gaji</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>
        </tbody>
    </table>

Gunakan JavaScript untuk menginisialisasi DataTables pada tabel yang telah kamu buat.

$(document).ready( function () {
    $('#datatableExample').DataTable();
} );

Untuk kode keseluruhannya adalah seperti ini

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Sourced Data</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.0.1/css/dataTables.dataTables.css">
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://cdn.datatables.net/2.0.1/js/dataTables.js"></script>
</head>
<body>
    <table id="datatableExample" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Nama</th>
                <th>Posisi</th>
                <th>Kantor</th>
                <th>Umur</th>
                <th>Tanggal Mulai</th>
                <th>Gaji</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>
        </tbody>
    </table>
    <script>
        $(document).ready( function () {
            $('#datatableExample').DataTable();
        } );
    </script>
</body>
</html>

Akhirnya jika dijalankan maka hasilnya akan tampak seperti gambar dibawah ini

Dengan menggunakan DataTables dengan HTML DOM Sourced Data, kamu dapat dengan mudah menampilkan data yang telah disediakan langsung melalui markup HTML kamu ke dalam tabel interaktif yang dapat dicari, diurutkan, dan dipaginasi.

Ini sangat berguna ketika kamu memiliki data statis yang ingin ditampilkan secara dinamis dalam aplikasi web kamu. Pastikan untuk menyesuaikan opsi DataTables sesuai dengan kebutuhan kamu untuk hasil yang optimal.

930 x 180 AD PLACEMENT

Edy Kurniawan

Content Creator | Web Developer

Berbagi banyak hal terkait teknologi termasuk Internet, App & Website.

Tutorial DataTables #1: HTML Sourced Data

Apa itu HTML DOM Sourced Data?

Langkah-langkah Penggunaan DataTables dengan HTML DOM Sourced Data

Tutorial Datatable #6: Internationalisation (Multi Language)

Tutorial Nuxt 3 #1 : Pengenalan & Instalasi Awal

Tutorial Datatable #5: Export Button

Tutorial Datatable #4: Styling

Tutorial DataTables #3: Serverside