Cara Menggunakan Datatables Di Php

6 min read Jul 27, 2024

Cara Menggunakan DataTables di PHP

DataTables adalah plugin JavaScript yang sangat populer untuk menampilkan tabel HTML yang interaktif dan kaya fitur. Plugin ini memungkinkan pengguna untuk melakukan berbagai operasi pada tabel seperti pencarian, sorting, pagination, dan banyak lagi. Pada artikel ini, kita akan membahas cara mengintegrasikan DataTables ke dalam proyek PHP Anda.

1. Menambahkan DataTables ke Proyek

Langkah pertama adalah menambahkan file JavaScript dan CSS DataTables ke proyek Anda. Anda dapat mengunduh file-file ini dari situs web resmi DataTables atau menggunakan CDN.

2. Memuat Data ke Tabel

Setelah Anda menambahkan DataTables ke proyek Anda, Anda perlu mengisi tabel HTML dengan data yang ingin Anda tampilkan. Anda dapat mengambil data dari database, file JSON, atau sumber data lainnya.

";
        echo "";
        echo "";
        echo "";
        echo "";
      }
    ?>
  
  
    
      Nama
      Umur
      Kota
    
  
  
    " . $row[0] . " " . $row[1] . " " . $row[2] . "

Nama	Umur	Kota
" . $row[0] . "	" . $row[1] . "	" . $row[2] . "

3. Inisialisasi DataTables

Setelah Anda memiliki tabel HTML yang diisi data, Anda perlu menginisialisasi DataTables untuk membuat tabel menjadi interaktif. Anda dapat melakukan ini dengan menambahkan kode JavaScript berikut ke halaman Anda.

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

Kode ini akan menginisialisasi DataTables pada tabel dengan ID myTable.

4. Mengatur Opsi DataTables

DataTables menyediakan berbagai opsi untuk menyesuaikan tampilan dan perilaku tabel. Anda dapat mengatur opsi ini menggunakan metode DataTable() seperti yang ditunjukkan di bawah ini:

$(document).ready(function() {
  $('#myTable').DataTable({
    // Opsi untuk kolom yang akan ditampilkan
    "columns": [
      { "data": "nama" },
      { "data": "umur" },
      { "data": "kota" }
    ],
    // Opsi untuk bahasa
    "language": {
      "url": "//cdn.datatables.net/plug-ins/1.10.11/i18n/Indonesian.json"
    }
  });
});

5. Fitur-Fitur DataTables

DataTables menyediakan berbagai fitur seperti:

Pencarian: Memungkinkan pengguna untuk mencari data dalam tabel.
Sorting: Memungkinkan pengguna untuk mengurutkan data berdasarkan kolom tertentu.
Pagination: Membagi data menjadi halaman-halaman untuk mempermudah navigasi.
Filtering: Memungkinkan pengguna untuk menyaring data berdasarkan kriteria tertentu.
Column visibility: Memungkinkan pengguna untuk menyembunyikan atau menampilkan kolom tertentu.
Scrolling: Memungkinkan pengguna untuk menggulir tabel dengan lancar.
Dan masih banyak lagi.

Contoh Kode Lengkap

Berikut adalah contoh kode lengkap yang menggabungkan semua langkah di atas:




  DataTables
  
  
  



";
        echo "";
        echo "";
        echo "";
        echo "";
      }
    ?>
  
  
    
      Nama
      Umur
      Kota
    
  
  
    " . $row[0] . " " . $row[1] . " " . $row[2] . "

Nama	Umur	Kota
" . $row[0] . "	" . $row[1] . "	" . $row[2] . "

Kesimpulan

DataTables adalah plugin yang sangat kuat dan mudah digunakan untuk membuat tabel HTML yang interaktif. Dengan menggunakan DataTables, Anda dapat dengan mudah meningkatkan pengalaman pengguna dan membuat tabel Anda lebih mudah dipahami dan dinavigasi.

Cara Menggunakan Datatables Di Php