Admin panel dengan tabel berisi 400 baris data sering berakhir jadi halaman yang menyiksa: header hilang saat scroll, kolom tanggal tidak bisa diurutkan, dan pengguna menebak-nebak angka mana yang paling besar. jQuery masih bisa menyelesaikan sebagian besar masalah ini tanpa menambah library tabel besar. Berikut tujuh teknik jquery untuk tabel data yang saya pakai berulang saat merapikan tabel.
1. Urutkan kolom saat header diklik
Fitur pertama yang selalu diminta pengguna adalah sorting. Simpan data asli di array JavaScript, lalu urutkan ulang barisnya setiap kali header diklik. Pendekatan ini menghindari manipulasi DOM langsung yang lambat pada tabel besar.
var rows = $('.tabel-data tbody tr').get();
$('.tabel-data thead th').on('click', function () {
var index = $(this).index();
var asc = $(this).data('asc') !== true;
rows.sort(function (a, b) {
var x = $(a).children('td').eq(index).text();
var y = $(b).children('td').eq(index).text();
return asc ? x.localeCompare(y, 'id', { numeric: true })
: y.localeCompare(x, 'id', { numeric: true });
});
$(this).data('asc', asc).siblings().removeData('asc');
$('.tabel-data tbody').empty().append(rows);
});Opsi numeric: true pada localeCompare membuat angka diurutkan sebagai angka, bukan teks, sehingga “9” tidak lagi muncul setelah “100”.
2. Filter kolom dengan input tunggal
Sorting membantu, tapi pengguna biasanya lebih cepat menemukan baris lewat pencarian. Pasang satu input di atas tabel, lalu sembunyikan baris yang tidak cocok. Kalau data tabel Anda berasal dari API dan strukturnya lebih rumit, pola filter ini mirip dengan yang dibahas di cara menampilkan data JSON ke HTML dengan jQuery untuk pemula.
$('#cari').on('input', function () {
var kata = $(this).val().toLowerCase();
$('.tabel-data tbody tr').each(function () {
var isi = $(this).text().toLowerCase();
$(this).toggle(isi.indexOf(kata) !== -1);
});
});Untuk kebutuhan filter yang lebih serius, misalnya pencarian multi-kriteria di sisi server, lihat juga cara membuat kolom pencarian PHP dan filter data.
3. Sticky header tanpa plugin
Header yang tetap terlihat saat halaman digulir membuat tabel panjang jauh lebih mudah dibaca. Cukup set posisi header secara dinamis dengan menambahkan class saat tabel melewati batas atas viewport.
var $tabel = $('.tabel-data');
var offset = $tabel.offset().top;
$(window).on('scroll', function () {
$tabel.find('thead').toggleClass('sticky',
$(window).scrollTop() > offset &&
$(window).scrollTop() < offset + $tabel.outerHeight() - 100);
});Atur .sticky { position: sticky; top: 0; background: #fff; z-index: 2; } di CSS. Batas bawah pada kondisi scroll mencegah header menempel sampai melewati tabel.
4. Format angka dan tanggal otomatis
Data mentah dari database jarang siap dibaca. Gunakan Intl.NumberFormat dan Intl.DateTimeFormat bawaan browser untuk menampilkan harga, persentase, atau tanggal dalam format Indonesia.
- Harga:
1.250.000bukan1250000 - Persentase: dua angka desimal dengan koma sebagai pemisah
- Tanggal:
29 Oktober 2026dari string ISO
Simpan nilai asli di atribut data-nilai agar sorting tetap akurat setelah tampilan diformat.
5. Sorot baris dengan hover dan seleksi
Pada tabel lebar, mata pengguna mudah kehilangan baris. Tambahkan sorotan saat hover lewat CSS, lalu pakai jQuery untuk menandai baris yang dipilih agar bisa diproses bersama, misalnya untuk aksi hapus massal.
$('.tabel-data tbody').on('click', 'tr', function (e) {
if ($(e.target).is('input, a, button')) return;
$(this).toggleClass('terpilih');
});Pengecekan e.target mencegah klik pada tombol aksi ikut memilih baris.
6. Paginasi klien sederhana
Menampilkan 400 baris sekaligus memperlambat render dan membuat scroll panjang tanpa ujung. Paginasi sisi klien dengan jQuery cukup memotong baris per halaman tanpa memanggil server lagi.
- Simpan semua baris dalam array.
- Tentukan jumlah baris per halaman, misalnya 25.
- Render hanya potongan yang sesuai halaman aktif.
- Buat tombol angka berdasarkan total baris dibagi ukuran halaman.
Kombinasi paginasi dan filter tetap bekerja karena keduanya beroperasi pada array yang sama.
7. Batasi lebar kolom panjang dengan tooltip
Kolom deskripsi sering memanjang dan merusak tata letak. Potong teks dengan CSS text-overflow: ellipsis, lalu tampilkan isi lengkap lewat tooltip saat kursor mendekat. Kalau belum ingin menambah plugin, tutorial membuat tooltip dengan jQuery tanpa plugin bisa jadi titik awal yang ringkas.
Saat memindahkan data antar fungsi untuk keperluan render dan filter, hati-hati dengan objek yang dipakai bersama. Perbedaan perilaku salinan referensi dibahas di cara menyalin objek di JavaScript: shallow vs deep copy, dan ini sering jadi sumber bug saat filter tampak mengubah data asli.
Menata urutan pengerjaan
Mulai dari sorting dan filter karena keduanya memberi manfaat paling terasa. Sticky header dan format angka menyusul setelah struktur dasar stabil. Paginasi sebaiknya ditambahkan terakhir, ketika jumlah baris benar-benar menjadi masalah, supaya Anda tidak menulis kode tambahan untuk data yang masih sedikit.
Pertanyaan yang Sering Diajukan
Apakah sorting jQuery tetap cepat untuk tabel dengan ribuan baris?
Untuk sekitar seribu baris, sorting di sisi klien masih wajar. Di atas itu, pindahkan pengurutan ke server dan minta hanya halaman yang sedang ditampilkan.
Perlukah plugin tabel khusus?
Kalau kebutuhan Anda hanya sorting, filter, dan paginasi dasar, kode jQuery di atas lebih ringan. Plugin berguna ketika Anda butuh ekspor, pengaturan kolom, atau pengelompokan baris yang kompleks.
Bagaimana menjaga format angka tetap benar setelah data diformat ulang?
Simpan nilai mentah di atribut data pada tiap sel dan gunakan atribut itu sebagai dasar sorting maupun filter, sementara teks yang terlihat hanya untuk tampilan.
