Tutorial Datatable #5: Export Button

Edy Kurniawan 19 Maret 2024

Halo teman-teman selamat datang kembali di lanjutan tutorial tentang DataTables.

DataTable adalah salah satu plugin JavaScript yang paling populer untuk menampilkan data dalam tabel interaktif di halaman web.

Salah satu fitur yang sering diminta oleh pengguna adalah kemampuan untuk mengekspor data dari tabel DataTable ke berbagai format file, seperti Excel, CSV, atau PDF.

Dalam tutorial ini, kita akan melihat bagaimana cara menambahkan tombol ekspor ke DataTable menggunakan plugin Buttons.

Import Library DataTables, Bootstrap dan Ekstensi Buttons

Pertama-tama, unduh versi terbaru DataTables, Bootstrap dan ekstensi Buttons dari situs resminya atau teman-teman juga bisa gunakan CDN.

Lalu kita tambahkan ke proyek melalui tag <script> dalam file HTML.

DataTables

<!-- Javascript Library -->
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.datatables.net/2.0.2/js/dataTables.js"></script>

Tambahkan library jQuery dan DataTables menggunakan tag <scripts>

Bootstrap

<!-- CSS Stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/2.0.2/css/dataTables.bootstrap5.css">

<!-- Javascript Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/2.0.2/js/dataTables.bootstrap5.js"></script>

untuk dapat menampilkan tata letak yang porposional dan ui table yang bagus, kita tambahkan bootstrap pada proyek kita seperti source code diatas

DataTables Buttons

<!-- CSS Stylesheet -->
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/3.0.1/css/buttons.dataTables.css">

<!-- Javascript Library -->
<script src="https://cdn.datatables.net/buttons/3.0.1/js/dataTables.buttons.js"></script>
<script src="https://cdn.datatables.net/buttons/3.0.1/js/buttons.dataTables.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/3.0.1/js/buttons.html5.min.js"></script>

mungkin kode nya secara keseluruhan adalah seperti ini

<!-- CSS Stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/2.0.2/css/dataTables.bootstrap5.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/3.0.1/css/buttons.dataTables.css">

<!-- Javascript Library -->
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.datatables.net/2.0.2/js/dataTables.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/2.0.2/js/dataTables.bootstrap5.js"></script>
<script src="https://cdn.datatables.net/buttons/3.0.1/js/dataTables.buttons.js"></script>
<script src="https://cdn.datatables.net/buttons/3.0.1/js/buttons.dataTables.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/3.0.1/js/buttons.html5.min.js"></script>

Persiapkan Element <table> sebagai media DataTables

<div class="container">
    <h1>Datatable - Buttons</h1>
    <table id="tablepulsa" class="table table-striped table-bordered" width="100%">
        <thead>
            <tr>
                <th>Nama Operator</th>
                <th>Jumlah Pulsa</th>
                <th>Pemilik Rekening</th>
                <th>Jumlah Transfer</th>
                <th>Nama Bank</th>
                <th>Status</th>
            </tr>
        </thead>
    </table>
</div>

karna kita telah import Bootstrap, maka kita juga bisa implementasikan class bootstrap kedalam elemen html proyek kita

Inisialisasi DataTable dengan Tombol Ekspor

Setelah memuat semua dependensi, teman-teman dapat menginisialisasi DataTable dan menambahkan tombol ekspor menggunakan JavaScript.

<script>
    var tablePulsa = new DataTable('#tablepulsa', {
        ajax: {
            url: "index.php",
            type: 'post',
        },
        columns: [
            { data: "nama_operator" },
            { data: "jumlah_pulsa" },
            { data: "pemilik_rekening" },
            { data: "jumlah_kirim" },
            { data: "nama_bank" },
            { data: "status" }
        ],
        processing: true,
        serverSide: true,
        lengthMenu: [[10, 25, 50, 100, 250, 500, 1000, -1], [10, 25, 50, 100, 250, 500, 1000, "Semua"]],
        dom: "<'row mb-3'<'col-sm-12 col-md-3'l><'col-sm-12 col-md-5'B><'col-sm-12 col-md-4'f>>" +
                "<'row mb-3'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
        buttons: ['copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5']
    });
</script>

mari kita bahas tentang object yang di inisialisasikan pada kode datatables diatas

ajax: object ini berisikan data yang nantinya DataTables akan mengeksekusi url yang telah ditentukan ke backend yang nantinya akan mendapatkan response data-data yang dibutuhkan datatables
column: merupakan inisialisasi nama object yang akan diletakkan pada DataTable dari data yang didapat dari response ajax tadi
proccessing dan serverSide: merupakan inisiasi mode pengambilan datanya adalah serverSide, mungkin bagi teman-teman yang belum mengerti tentang apa itu DataTables Server Side bisa cek link ini (DataTables Server Side)
dom: merupakan object yang digunakan untuk menampilkan atau untuk menyesuaikan tata letak dari bagian-bagian dari DataTables yaitu berupa button, find, page length, table, info, pagination.
lengthMenu: merupakan data yang digunakan oleh datatable sebagai option dari paging yaitu jumlah data perhalaman.
buttons: merupakan inisialisasi tombol-tombol pada DataTable. Tentunya menyesuaikan dengan plugin yang sudah diimport

Melakukan Uji Coba

Sekarang, refresh halaman web teman-teman. Teman-teman akan melihat tombol-tombol ekspor di atas tabel.

Cobalah untuk mengekspor data ke format yang diinginkan.

Dengan mengikuti langkah-langkah di atas, teman-teman telah berhasil menambahkan tombol ekspor ke DataTable.

Teman-teman dapat menyesuaikan tata letak dan gaya tombol sesuai kebutuhan proyek teman-teman. Selamat mencoba!

Menambahkan tombol ekspor ke DataTable memungkinkan pengguna untuk dengan mudah mengunduh data dalam berbagai format.

Dengan menggunakan ekstensi Buttons, teman-teman dapat menambahkan fungsionalitas ini dengan cepat dan mudah ke proyek web teman-teman.

Semoga tutorial ini membantu teman-teman memperluas fungsionalitas tabel DataTable teman-teman.

930 x 180 AD PLACEMENT

Edy Kurniawan

Content Creator | Web Developer

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

Tutorial Datatable #5: Export Button

Import Library DataTables, Bootstrap dan Ekstensi Buttons

DataTables

Bootstrap

DataTables Buttons

Persiapkan Element <table> sebagai media DataTables

Inisialisasi DataTable dengan Tombol Ekspor

Melakukan Uji Coba

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