Feat/datatable debounce

[pandigresik]

Pull Request: Implementasi Debounce pada Pencarian DataTable

Deskripsi

Menambahkan mekanisme debounce pada pencarian DataTable untuk mencegah request berulang yang tidak perlu ke server. Saat ini, ketika user mengetik kata pencarian (misalnya "kemiri"), setiap karakter yang diketik memicu request terpisah ke server, menghasilkan 3+ request untuk satu kata pencarian. Dengan debounce, request hanya dikirim setelah user selesai mengetik.

Perubahan yang dilakukan:

1. Penambahan searchDelay pada DataTable defaults: Menambahkan konfigurasi searchDelay: 500 sebagai default untuk semua instance DataTable di aplikasi.

2. Custom event handler dengan debounce: Menambahkan event listener init.dt yang mengoverride default search behavior DataTable dengan implementasi debounce manual menggunakan setTimeout dan clearTimeout.

3. Penghapusan event handler bawaan DataTable: Menggunakan searchInput.off('keyup.DT input.DT search.DT keydown.DT') untuk menghapus event handler bawaan DataTable sebelum menambahkan custom handler dengan debounce.

4. Pencegahan redundant search: Menambahkan pengecekan previousSearch dan table.search() !== currentValue untuk memastikan tidak ada request yang dikirim jika nilai pencarian tidak berubah.

Alasan perubahan:

• Mengurangi beban server: Tanpa debounce, mengetik "kemiri" (6 karakter) bisa menghasilkan 6+ request HTTP ke server, padahal hanya 1 request yang diperlukan.
• Mencegah spam request: User yang mengetik cepat atau menghapus karakter bisa memicu banyak request yang tidak perlu.
• Mengurangi beban database: Setiap request pencarian memicu query ke database, sehingga request yang tidak perlu meningkatkan load DB secara signifikan.
• UX yang lebih baik: User tidak perlu menunggu response untuk setiap karakter yang diketik, pencarian hanya dilakukan setelah user selesai mengetik.

Dampak perubahan:

✅ Performance: Request HTTP berkurang hingga 80-90% untuk pencarian dengan kata panjang
✅ Database load: Query ke database berkurang signifikan
✅ User Experience: Pencarian lebih responsif tanpa lag akibat request berulang
✅ Network efficiency: Bandwidth usage lebih efisien

Masalah Terkait (Related Issue)

• Solusi untuk perbaikan terkait issue Tambahkan fungsi global untuk debounce search datatable #1548
• Link: Tambahkan fungsi global untuk debounce search datatable #1548

Langkah untuk mereproduksi (Steps to Reproduce)

Sebelum perbaikan (masalah):

1. Buka halaman yang menggunakan DataTable (misalnya halaman data penduduk, surat, dll)
2. Ketik kata pencarian "kemiri" di kolom search DataTable
3. Perhatikan network tab di browser DevTools
4. ❌ Terlihat 6+ request HTTP untuk satu kata "kemiri" (satu request per karakter)
5. ❌ Hapus karakter satu per satu, setiap penghapusan juga memicu request terpisah

Setelah perbaikan (fix):

1. Buka halaman yang menggunakan DataTable
2. Ketik kata pencarian "kemiri" di kolom search DataTable
3. Perhatikan network tab di browser DevTools
4. ✅ Hanya 1 request HTTP yang dikirim setelah user berhenti mengetik (delay 500ms)
5. ✅ Hapus karakter, request hanya dikirim setelah user berhenti menghapus

Testing pada fitur lain yang terkait:

• Pagination DataTable ✅ Tidak terpengaruh
• Sorting kolom ✅ Tidak terpengaruh
• Filter custom (jika ada) ✅ Perlu dicek
• Export data ✅ Tidak terpengaruh

Daftar Periksa (Checklist)

• Saya telah mematuhi aturan penulisan script
• Saya telah mengikuti proses review pull request
• Testing manual telah dilakukan di environment development
• Tidak ada console error atau warning
• Code sudah di-review

Teknis Detail

Penjelasan Teknis

File yang diubah: resources/views/partials/asset_datatables.blade.php

Implementasi debounce menggunakan pattern standar JavaScript:

// Hapus event handler bawaan DataTable
searchInput.off('keyup.DT input.DT search.DT keydown.DT');

// Tambahkan custom handler dengan debounce
searchInput.on('keyup input', function() {
    var currentValue = this.value;

    // Skip jika nilai tidak berubah
    if (previousSearch === currentValue) return;
    previousSearch = currentValue;

    // Reset timer debounce
    clearTimeout(debounceTimer);

    // Execute search setelah delay
    debounceTimer = setTimeout(function() {
        if (table.search() !== currentValue) {
            table.search(currentValue).draw();
        }
    }, searchDelay);
});

Cara kerja:

1. searchDelay di-set ke 500ms sebagai default di $.fn.dataTable.defaults
2. Saat DataTable diinisialisasi (init.dt event), custom event handler dipasang
3. Event handler bawaan DataTable dihapus untuk mencegah duplicate search
4. Setiap keystroke memicu keyup input event, tapi search hanya dijalankan setelah:
   • Timer setTimeout selesai (500ms delay)
   • Nilai pencarian benar-benar berubah
   • Timer di-reset (clearTimeout) jika ada keystroke baru sebelum delay habis

Konfigurasi yang berubah:

• searchDelay: 500 ditambahkan ke DataTable defaults (500ms)
• Fallback searchDelay || 1500 jika tidak ada default yang diset

Dependencies yang ditambahkan:

• Tidak ada dependencies baru (menggunakan vanilla JavaScript + jQuery yang sudah ada)

Testing

Manual Testing

• Ketik kata panjang di search box, verifikasi hanya 1 request yang dikirim
• Hapus karakter di search box, verifikasi hanya 1 request yang dikirim
• Ketik dan hapus berulang kali, verifikasi request hanya setelah berhenti
• Cek Network tab di DevTools untuk menghitung jumlah request
• Verifikasi hasil pencarian tetap akurat
• Test di berbagai halaman yang menggunakan DataTable
• Regression Testing - test fitur lain di DataTable (pagination, sorting) tidak rusak

Screenshots / Video

simplescreenrecorder-2026-05-19_15.44.54.mp4

Sebelum:

Setiap karakter yang diketik memicu request terpisah:

"k" -> Request 1
"ke" -> Request 2
"kem" -> Request 3
"kemi" -> Request 4
"kemir" -> Request 5
"kemiri" -> Request 6

Sesudah:

Hanya 1 request setelah user selesai mengetik (delay 500ms):

"kemiri" -> [500ms delay] -> Request 1

Breaking Changes

Tidak ada breaking changes. Perubahan bersifat backward compatible dan hanya mengubah timing dari request pencarian, bukan hasil atau behavior pencarian itu sendiri.

Migration Guide

Tidak diperlukan migration. Perubahan otomatis berlaku untuk semua halaman yang menggunakan partial asset_datatables.blade.php.

References

• DataTables searchDelay documentation
• Debounce pattern JavaScript
• Issue: Tambahkan fungsi global untuk debounce search datatable #1548

---

Catatan tambahan:

• Default delay 500ms dipilih sebagai balance antara responsivitas dan pengurangan request
• Nilai delay bisa disesuaikan per-table jika diperlukan dengan mengoverride searchDelay di initialization DataTable
• Implementasi ini konsisten dengan pattern debounce yang umum digunakan di web development

[github-actions]

🔄 AI PR Review sedang antri di server...

Proses review akan segera dimulai di background — hasil akan muncul sebagai komentar setelah selesai.
Powered by CrewAI · PR #1552