Export All Rows Datatables dengan SheetJS di CI

3 min read

hajarsabrani

13 Februari 2025

Export All Rows Datatables dengan SheetJS di CI

Export semua data dari tabel ke format Excel merupakan salah satu fitur yang sangat berguna dalam berbagai aplikasi web. Fitur export excel dari datatables biasanya hanya menghasilkan export data 10 baris pertama yang tampil di halaman. Lalu bagaimana jika kita ingin export semua baris yang ada di tabel? Dengan menggunakan kombinasi Datatables, SheetJS, dan framework CodeIgniter (CI), kamu bisa membuat fitur ini. Artikel ini akan membahas langkah-langkah detail untuk mengekspor semua baris dari Datatables ke dalam file Excel menggunakan SheetJS di CodeIgniter.

1. Persiapan

Sebelum memulai, pastikan kamu sudah menginstal CodeIgniter dan mengaktifkan Datatables di proyek kamu. Kamu juga perlu mengunduh SheetJS (xlsx.full.min.js) dari situs resminya atau menggunakan CDN.

2. Instalasi dan Konfigurasi

Pertama, tambahkan SheetJS ke dalam proyek kamu. Tempatkan file di folder public/javascripts atau kamu juga bisa menggunakan tautan CDN.

html

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>

3. Integrasi Datatables

Pastikan kamu sudah mengintegrasikan Datatables di view kamu. Berikut contoh sederhana integrasi Datatables:

html

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Nama</th>
            <th>Posisi</th>
            <th>Usia</th>
        </tr>
    </thead>
    <tbody>
        <!-- Data akan diisi di sini -->
    </tbody>
</table>

<script>
$(document).ready(function() {
    $('#example').DataTable({
        // Konfigurasi Datatables
    });
});
</script>

4. Tambahkan Tombol Export

Tambahkan tombol untuk memicu proses ekspor data ke dalam file Excel. Letakkan di dalam view kamu:

html

<button id="exportButton">Export to Excel</button>

5. Implementasi Fungsi Export

Sekarang kita akan menambahkan fungsi JavaScript untuk mengekspor data dari Datatables ke dalam file Excel menggunakan SheetJS. Tempatkan kode berikut di dalam file JavaScript kamu:

javascript

<script>
document.getElementById('exportButton').addEventListener('click', function() {
    var table = $('#example').DataTable();
    var data = table.rows().data().toArray();
    var ws = XLSX.utils.json_to_sheet(data);
    var wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
    XLSX.writeFile(wb, 'DataTables_Export.xlsx');
});
</script>

6. Pengaturan Model dan Controller di CodeIgniter

Sekarang, kita perlu menambahkan fungsi di Model dan Controller di CodeIgniter untuk mengambil data yang akan diekspor. Pertama, tambahkan fungsi di Model untuk mendapatkan data:

php

class Data_model extends CI_Model {
    public function get_data() {
        $query = $this->db->get('nama_tabel'); // Ganti dengan nama tabel kamu
        return $query->result_array();
    }
}

Kemudian, tambahkan fungsi di Controller untuk mengirim data ke view:

php

class Data extends CI_Controller {
    public function index() {
        $this->load->model('Data_model');
        $data['rows'] = $this->Data_model->get_data();
        $this->load->view('data_view', $data);
    }
}

7. Integrasi Data dengan View

Pastikan data yang diambil dari database diintegrasikan dengan view Datatables:

html

<tbody>
<?php foreach($rows as $row): ?>
    <tr>
        <td><?php echo $row['nama']; ?></td>
        <td><?php echo $row['posisi']; ?></td>
        <td><?php echo $row['usia']; ?></td>
    </tr>
<?php endforeach; ?>
</tbody>

Metode ini sangat efektif dan efisien untuk menangani data dalam jumlah besar dan memudahkan pengguna untuk mengunduh data dalam format yang dibutuhkan.

Selamat mencoba!