Panduan Langkah demi Langkah Menampilkan Data dari AJAX jQuery ke

Anda punya endpoint yang mengembalikan daftar pesanan, lalu ingin menampilkannya di halaman tanpa reload. Cara menampilkan data dari AJAX jQuery ke tabel HTML bisa dilakukan dengan beberapa baris kode, asalkan struktur respons dan elemen tabel sudah disiapkan. Berikut langkahnya.

1. Siapkan struktur tabel di HTML

Buat tabel dengan thead untuk judul kolom dan tbody kosong sebagai tempat baris data. Beri id pada tbody agar mudah dipilih lewat jQuery.

<table id="tabel-pesanan">
  <thead>
    <tr>
      <th>ID</th>
      <th>Produk</th>
      <th>Jumlah</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

Judul kolom ditulis manual karena jumlah dan namanya tetap. Baris data diisi dari respons server.

2. Tentukan bentuk data yang dikirim server

Server sebaiknya mengembalikan array objek JSON. Setiap objek mewakili satu baris, misalnya:

[
  { "id": 101, "produk": "Kopi Arabika", "jumlah": 2, "status": "dikirim" },
  { "id": 102, "produk": "Teh Hijau", "jumlah": 1, "status": "diproses" }
]

Dengan bentuk ini, Anda tinggal melakukan perulangan di sisi klien. Jika server mengembalikan format lain, sesuaikan kode pengambilan propertinya.

3. Ambil data dengan AJAX jQuery

Gunakan $.ajax atau $.getJSON. Untuk kebutuhan sederhana, $.getJSON lebih ringkas. Pilihan metode lain bisa dilihat di panduan memilih metode AJAX jQuery.

$.getJSON('/api/pesanan', function(data) {
  // data berisi array objek
}).fail(function() {
  alert('Gagal memuat data pesanan.');
});

Tangani juga kegagalan permintaan. Tanpa penanganan error, pengguna hanya melihat tabel kosong saat jaringan bermasalah.

4. Bangun baris tabel dari data

Kosongkan tbody terlebih dahulu agar data lama tidak menumpuk saat fungsi dipanggil ulang. Kemudian susun string HTML untuk setiap baris, atau buat elemen dengan jQuery.

var $tbody = $('#tabel-pesanan tbody');
$tbody.empty();

$.each(data, function(i, item) {
  var $row = $('<tr>');
  $row.append($('<td>').text(item.id));
  $row.append($('<td>').text(item.produk));
  $row.append($('<td>').text(item.jumlah));
  $row.append($('<td>').text(item.status));
  $tbody.append($row);
});

Memakai .text() mencegah karakter HTML dari data ikut dieksekusi. Jika data berasal dari input pengguna, jangan gunakan .html() untuk mengisi sel.

5. Tangani kondisi kosong dan loading

Tampilkan pesan saat data tidak ada. Satu baris dengan colspan sesuai jumlah kolom sudah cukup.

if (data.length === 0) {
  $tbody.append('<tr><td colspan="4">Belum ada pesanan.</td></tr>');
}

Untuk loading, tampilkan teks “Memuat…” sebelum permintaan dikirim, lalu hapus setelah respons diterima. Ini memberi umpan balik tanpa perlu spiner rumit.

6. Perbarui tabel tanpa menimpa event

Jika baris tabel memiliki tombol dengan event, memasang event langsung pada elemen yang dibuat ulang akan membuat handler hilang. Gunakan event delegation pada tbody.

$('#tabel-pesanan tbody').on('click', '.tombol-hapus', function() {
  var id = $(this).data('id');
  // kirim permintaan hapus
});

Pastikan tombol membawa atribut data-id saat dibuat. Cara mengambil nilai atribut seperti ini dibahas di artikel tentang val(), attr(), dan data().

7. Hindari membangun HTML dengan penggabungan string mentah

Menyusun '<tr><td>' + item.produk + '</td></tr>' berisiko jika data mengandung tanda kutip atau karakter khusus. Membuat elemen dengan $('<td>') lalu mengisi teksnya lebih aman. Alternatifnya, gunakan fungsi escape sebelum menyisipkan ke string.

Ringkasan

Menampilkan data AJAX ke tabel HTML terdiri dari empat bagian: tabel dengan tbody kosong, respons JSON yang konsisten, perulangan untuk membuat baris, dan penanganan error serta kondisi kosong. Gunakan .text() untuk mengisi sel dan event delegation untuk tombol di dalam baris. Dengan begitu, tabel tetap aman dan bisa diperbarui berkali-kali tanpa masalah.

Pertanyaan yang Sering Diajukan

Apakah harus memakai jQuery untuk menampilkan data ke tabel?

Tidak. JavaScript modern dengan fetch dan document.createElement bisa melakukan hal yang sama. jQuery tetap relevan jika proyek sudah memakainya dan Anda ingin kode yang ringkas.

Bagaimana jika data dari server sangat banyak?

Membuat ribuan baris sekaligus membuat halaman berat. Terapkan pagination di sisi server atau muat data per halaman, lalu panggil AJAX setiap kali halaman berubah.

Mengapa tombol di dalam baris tidak merespons setelah tabel diperbarui?

Event yang dipasang langsung pada elemen lama hilang saat elemen diganti. Pasang handler pada elemen induk yang tetap ada, seperti tbody, dengan selector tombol sebagai argumen kedua.