feat: datatable debounce

[pandigresik]

Pull Request: Debounce Pencarian DataTable untuk Mencegah Spam Request

Deskripsi

Implementasi debounce pada fitur pencarian DataTable di seluruh halaman admin OpenKab. Tanpa debounce, setiap karakter yang diketik user langsung memicu request ke server (misal: mengetik "kemiri" menghasilkan 6+ request untuk "k", "ke", "kem", "kemi", "kemir", "kemiri"). Perubahan ini memastikan request hanya dikirim 1x setelah user selesai mengetik.

Perubahan yang dilakukan:

1. Addition (resources/views/layouts/index.blade.php): Menambahkan searchDelay: 500 pada konfigurasi default DataTable untuk semua tabel di aplikasi.
2. Addition (resources/views/layouts/index.blade.php): Menambahkan event handler init.dt yang menerapkan custom debounce logic pada input search DataTable.
3. Modification (resources/views/layouts/index.blade.php): Menghapus default event handler DataTable (keyup.DT input.DT search.DT keydown.DT) dan menggantinya dengan handler custom yang menggunakan setTimeout untuk debounce.

Alasan perubahan:

• Masalah spam request: Tanpa debounce, setiap keystroke memicu request AJAX ke server. Mengetik kata "kemiri" menghasilkan 6+ request yang tidak perlu.
• Beban database: Request berulang yang tidak diperlukan meningkatkan beban database secara signifikan, terutama pada tabel dengan data besar.
• Efisiensi network: Mengurangi traffic network yang tidak perlu dan meningkatkan performa aplikasi secara keseluruhan.
• User experience: Mencegah UI "berkedip" atau lag akibat multiple draw yang terjadi bersamaan.

Dampak perubahan:

✅ Performance: Request pencarian berkurang drastis (dari N request per kata menjadi 1 request setelah user selesai mengetik)
✅ Database load: Beban query database berkurang signifikan karena tidak ada query parsial yang tidak perlu
✅ Network efficiency: Bandwidth yang digunakan lebih efisien
✅ User experience: Pencarian tetap responsif dengan delay 500ms yang tidak mengganggu UX
✅ Backward compatible: Tidak mengubah API atau struktur data, hanya mengubah timing request

Masalah Terkait (Related Issue)

• Solusi untuk perbaikan terkait issue Tambahkan fungsi global untuk debounce search datatable #1041
• Tambahkan fungsi global untuk debounce search datatable #1041

Langkah untuk mereproduksi (Steps to Reproduce)

Sebelum perbaikan (masalah):

1. Buka halaman yang menggunakan DataTable (misal: daftar penduduk, daftar keluarga)
2. Ketik kata pencarian "kemiri" di kolom search DataTable
3. Perhatikan Network tab di browser DevTools
4. ❌ Terjadi 6+ request untuk setiap karakter yang diketik ("k", "ke", "kem", "kemi", "kemir", "kemiri")
5. ❌ Saat menghapus karakter, juga terjadi request untuk setiap karakter yang dihapus

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 terjadi 1 request setelah user berhenti mengetik selama 500ms
5. ✅ Saat menghapus karakter, request hanya terjadi setelah user berhenti menghapus selama 500ms

Testing pada fitur lain yang terkait:

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

Daftar Periksa (Checklist)

• Saya telah mematuhi aturan penulisan script.
• Saya telah mengikuti proses review pull request.
• Tidak ada console error atau warning
• Code sudah di-review oleh [minimal 1 orang]
• Testing manual telah dilakukan di environment development

Teknis Detail

Penjelasan Teknis

Implementasi debounce menggunakan pola standar JavaScript dengan setTimeout dan clearTimeout:

$(document).on('init.dt', function(e, settings) {
    var table = new $.fn.dataTable.Api(settings);
    var searchDelay = table.init().searchDelay || 1500; // fallback 1500ms
    var searchInput = $('div.dataTables_filter input', table.table().container());
    var debounceTimer = null;
    var previousSearch = null;

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

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

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

        previousSearch = currentValue;
        clearTimeout(debounceTimer);

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

Mekanisme kerja:

1. Event init.dt dipanggil setiap kali DataTable diinisialisasi
2. Handler default DataTable dihapus untuk mencegah request langsung
3. Handler custom ditambahkan dengan debounce timer (default 500ms dari searchDelay)
4. Variable previousSearch mencegah redundant search jika nilai tidak berubah
5. clearTimeout membatalkan timer sebelumnya saat user masih mengetik
6. table.search().draw() hanya dipanggil setelah timer selesai (user berhenti mengetik)

Optimasi tambahan:

• searchDelay: 500 di-set sebagai default global untuk semua DataTable
• Fallback 1500ms jika searchDelay tidak ditemukan di init config
• Cek table.search() !== currentValue mencegah draw ulang jika nilai sudah sama

Konfigurasi yang berubah

• searchDelay: 500 ditambahkan ke $.fn.dataTable.defaults

Dependencies yang ditambahkan

• Tidak ada dependencies baru

Testing

Manual Testing

• Ketik kata pendek (3-5 karakter) di search DataTable, pastikan hanya 1 request di Network tab
• Ketik kata panjang (10+ karakter), pastikan hanya 1 request setelah berhenti mengetik
• Hapus karakter satu per satu, pastikan hanya 1 request setelah berhenti menghapus
• Ketik lalu langsung hapus semua, pastikan tidak ada request yang tersisa
• Test di berbagai halaman yang menggunakan DataTable (penduduk, keluarga, dll)
• Pastikan hasil pencarian tetap akurat setelah debounce
• Regression Testing - test fitur lain di DataTable (pagination, sorting) tidak rusak

Screenshots / Video

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

Sebelum:

Network tab menunjukkan multiple request untuk setiap keystroke saat mengetik "kemiri":

• Request 1: search="k"
• Request 2: search="ke"
• Request 3: search="kem"
• Request 4: search="kemi"
• Request 5: search="kemir"
• Request 6: search="kemiri"

Sesudah:

Network tab menunjukkan hanya 1 request setelah user selesai mengetik:

• Request 1: search="kemiri" (setelah 500ms tidak ada input baru)

Breaking Changes

Tidak ada breaking changes. Perubahan hanya mempengaruhi timing request, bukan fungsi atau API.

Migration Guide

Tidak diperlukan.

References

• DataTables searchDelay option
• Debounce pattern in JavaScript

---

Catatan tambahan:

• Default debounce delay diset 500ms, nilai ini bisa disesuaikan jika diperlukan dengan mengubah searchDelay di $.fn.dataTable.defaults
• Implementasi ini berlaku global untuk semua DataTable di aplikasi karena didefinisikan di layout utama (index.blade.php)

[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 #1042