DataTables adalah salah satu plugin JavaScript yang paling populer untuk membuat tabel interaktif dalam halaman web. Ini memungkinkan pengguna untuk dengan mudah menyortir, mencari, dan memfilter data dalam tabel dengan cepat dan efisien. Salah satu fitur utama DataTables adalah kemampuannya untuk menggunakan berbagai sumber data, termasuk data yang diperoleh dari sumber eksternal.

Dalam tutorial ini, saya akan menjelaskan bagaimana kamu dapat menggunakan sumber data eksternal (sourced data) dalam DataTables JavaScript.

Langkah-langkah Penggunaan DataTables dengan Javascript Sourced Data

<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>

<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>
    </table>

Sekarang, mari kita buat skrip JavaScript dan juga dengan data untuk mengisi tabel DataTables.

var data = [
    {
        "name": "Tiger Nixon",
        "position": "System Architect",
        "office": "Edinburgh",
        "age": "61",
        "start_date": "2011/04/25",
        "salary": "$320,800"
    },
    {
        "name": "Garrett Winters",
        "position": "Accountant",
        "office": "Tokyo",
        "age": "63",
        "start_date": "2011/07/25",
        "salary": "$170,750"
    },
]

// script.js
$(document).ready(function() {
    $('#datatableExample').DataTable({
        "data": data,
        "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "age" },
            { "data": "start_date" },
            { "data": "salary" }
        ]
    });
});

• data: Properti ini digunakan untuk menentukan sumber data internal yang akan digunakan. Dalam hal ini, itu adalah variabel data.
• columns: Properti ini menentukan bagaimana data dari sumber eksternal akan dipetakan ke dalam kolom tabel. Setiap objek dalam array ini mewakili satu kolom, dan properti data menentukan kunci dalam objek JSON yang akan digunakan.

Ketika dijalankan maka hasilnya akan seperti dibawah ini

Dengan menggunakan sumber data pada javascript, DataTables memungkinkan pengembang untuk membuat tabel dinamis dengan mudah menggunakan berbagai jenis data. Dengan memanfaatkan fitur ini, pengguna dapat membuat aplikasi web yang lebih kuat dan interaktif.

Dengan demikian, kamu telah berhasil melakukan bagaimana cara menggunakan sumber data dalam DataTables JavaScript. Dengan memahami konsep ini, kamu dapat meningkatkan fungsionalitas tabelmu dengan mudah. Selamat mencoba!

Ini adalah tutorial singkat tentang penggunaan Javascript Sourced Data.

Semoga bermanfaat!