Cara Menggunakan Datatables

7 min read Jul 26, 2024

Cara Menggunakan DataTables Keyword

DataTables adalah plugin jQuery yang populer untuk menampilkan dan memanipulasi data dalam tabel HTML. Keyword DataTables memungkinkan Anda untuk mengontrol bagaimana DataTables memproses data Anda, membantu Anda mendapatkan hasil terbaik dari plugin ini.

Berikut adalah beberapa keyword DataTables yang paling umum:

1. `columns`

Keyword columns digunakan untuk mendefinisikan kolom dalam tabel Anda. Anda dapat menggunakannya untuk:

Menentukan tipe data kolom: Apakah kolom berisi teks, angka, tanggal, atau lainnya.
Mengatur lebar kolom: Anda dapat menetapkan lebar kolom secara manual atau membiarkan DataTables mengalokasikan lebar secara otomatis.
Menampilkan atau menyembunyikan kolom: Anda dapat memilih untuk menampilkan atau menyembunyikan kolom tertentu dari tabel.
Menambahkan label kolom: Anda dapat menetapkan label khusus untuk kolom yang ditampilkan di header tabel.

Berikut adalah contoh penggunaan columns:

$(document).ready(function() {
    $('#example').DataTable( {
        columns: [
            { data: 'name' },
            { data: 'age' },
            { data: 'salary' }
        ]
    } );
} );

2. `data`

Keyword data digunakan untuk menentukan sumber data untuk tabel DataTables. Anda dapat menggunakannya untuk:

Memuat data dari array JavaScript: Anda dapat menentukan array JavaScript yang berisi data untuk tabel.
Memuat data dari JSON: Anda dapat menentukan URL yang berisi data JSON.
Memuat data dari server: Anda dapat menggunakan AJAX untuk memuat data dari server.

Berikut adalah contoh penggunaan data:

$(document).ready(function() {
    $('#example').DataTable( {
        data: [
            { "name": "Tiger Nixon", "position": "System Architect", "salary": "320800" },
            { "name": "Garrett Winters", "position": "Accountant", "salary": "170750" },
            { "name": "Ashton Cox", "position": "Junior Technical Author", "salary": "86000" }
        ]
    } );
} );

3. `order`

Keyword order digunakan untuk menentukan bagaimana DataTables mengurutkan data secara default. Anda dapat menggunakannya untuk:

Menentukan kolom yang diurutkan: Anda dapat menentukan kolom mana yang akan diurutkan.
Menentukan urutan pengurutan: Anda dapat menentukan apakah pengurutan akan dilakukan secara ascending (menaik) atau descending (menurun).

Berikut adalah contoh penggunaan order:

$(document).ready(function() {
    $('#example').DataTable( {
        order: [[ 1, 'asc' ]]
    } );
} );

4. `search`

Keyword search digunakan untuk mengontrol fitur pencarian DataTables. Anda dapat menggunakannya untuk:

Menentukan kolom pencarian: Anda dapat menentukan kolom mana yang akan dicari.
Menentukan tipe pencarian: Anda dapat menentukan apakah pencarian akan dilakukan secara case-sensitive (peka huruf besar kecil) atau case-insensitive (tidak peka huruf besar kecil).
Menambahkan teks pencarian awal: Anda dapat menetapkan teks pencarian awal untuk tabel.

Berikut adalah contoh penggunaan search:

$(document).ready(function() {
    $('#example').DataTable( {
        search: {
            search: "Tiger"
        }
    } );
} );

5. `paging`

Keyword paging digunakan untuk mengontrol fitur pagination DataTables. Anda dapat menggunakannya untuk:

Mengaktifkan atau menonaktifkan pagination: Anda dapat memilih untuk menampilkan atau menyembunyikan pagination.
Menentukan jumlah baris per halaman: Anda dapat menentukan berapa banyak baris yang akan ditampilkan per halaman.
Menambahkan tombol pagination khusus: Anda dapat menambahkan tombol pagination khusus ke tabel.

Berikut adalah contoh penggunaan paging:

$(document).ready(function() {
    $('#example').DataTable( {
        paging: true,
        pageLength: 5
    } );
} );

6. `dom`

Keyword dom digunakan untuk menentukan struktur tabel DataTables. Anda dapat menggunakannya untuk:

Menentukan posisi elemen: Anda dapat memilih untuk menampilkan elemen seperti pencarian, pagination, dan informasi jumlah data di berbagai lokasi di tabel.
Menambahkan elemen khusus: Anda dapat menambahkan elemen khusus, seperti tombol atau menu, ke tabel.

Berikut adalah contoh penggunaan dom:

$(document).ready(function() {
    $('#example').DataTable( {
        dom: '<"top"f>rt<"bottom"lp<"clear">>'
    } );
} );

7. `language`

Keyword language digunakan untuk mengubah teks yang digunakan oleh DataTables. Anda dapat menggunakannya untuk:

Menerjemahkan teks ke bahasa lain: Anda dapat menerjemahkan teks default ke bahasa yang Anda inginkan.
Mengubah teks default: Anda dapat mengubah teks default seperti "Showing 1 to 10 of 57 entries" menjadi teks yang lebih sesuai.

Berikut adalah contoh penggunaan language:

$(document).ready(function() {
    $('#example').DataTable( {
        language: {
            search: "Cari:",
            info: "Menampilkan _START_ hingga _END_ dari _TOTAL_ entri"
        }
    } );
} );

8. `buttons`

Keyword buttons digunakan untuk menambahkan tombol ke tabel DataTables. Anda dapat menggunakannya untuk:

Menambahkan tombol cetak: Anda dapat menambahkan tombol untuk mencetak tabel.
Menambahkan tombol ekspor: Anda dapat menambahkan tombol untuk mengekspor data tabel ke format seperti CSV, Excel, atau PDF.
Menambahkan tombol lainnya: Anda dapat menambahkan tombol khusus untuk menjalankan tindakan tertentu pada tabel.

Berikut adalah contoh penggunaan buttons:

$(document).ready(function() {
    $('#example').DataTable( {
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    } );
} );

Kesimpulan

Keyword DataTables adalah alat yang kuat untuk mengontrol perilaku dan penampilan tabel DataTables. Dengan memahami keyword ini, Anda dapat membuat tabel DataTables yang sesuai dengan kebutuhan Anda.

Cara Menggunakan Datatables