Fix: Pagination DataTables pada Halaman Unduhan Tidak Berfungsi

[pandigresik]

Description

Halaman Unduhan (Dokumen, Prosedur, Regulasi) menggunakan DataTables dengan serverSide: false namun API endpoint mengembalikan data secara server-side paginated. Akibatnya:

1. Dropdown "Tampilkan X data per halaman" tidak berfungsi — DataTables tidak bisa menghitung total record karena recordsTotal/recordsFiltered tidak diset dari response.
2. Navigasi pagination DataTables tidak menampilkan jumlah halaman yang benar.

Perbaikan dilakukan dengan mengubah serverSide: false → serverSide: true dan menggunakan dataSrc sebagai callback function untuk memetakan meta.pagination.total ke recordsTotal/recordsFiltered yang dibaca DataTables.

Changes

1. themes/opendk/default/resources/views/pages/unduhan/form-dokumen.blade.php

   • Ubah serverSide: false → serverSide: true
   • Ubah dataSrc: 'data' → dataSrc: function(json) { ... return json.data; } untuk menyuntikkan recordsTotal/recordsFiltered dari json.meta.pagination.total
   • Tambah pageLength: 10 dan lengthMenu: [5, 10, 25, 50, 100]

2. themes/opendk/default/resources/views/pages/unduhan/prosedur.blade.php

   • Sama perbaikan dengan prosedur.blade.php

3. themes/opendk/default/resources/views/pages/unduhan/regulasi.blade.php

   • Sama perbaikan dengan regulasi.blade.php

Reason

API JSON:API (spatie/laravel-json-api-paginate) mengembalikan meta.pagination.total untuk total record, namun DataTables dengan serverSide: false mengabaikan dropdown length dan tidak bisa membaca metadata pagination. Dengan serverSide: true, DataTables mengirim page[number] dan page[size] ke API dan membaca recordsTotal/recordsFiltered dari response JSON — namun hanya jika nilainya diset di objek response, bukan di config. Поэтому dataSrc sebagai callback digunakan untuk menyuntikkan nilai tersebut sebelum DataTables memproses response.

Impact

• Dropdown "Tampilkan X data per halaman" pada halaman Unduhan sekarang berfungsi
• Navigasi pagination menunjukkan jumlah halaman yang benar berdasarkan total data dari API
• Pengguna dapat melihat seluruh data dokumen/prosedur/regulasi tanpa kehilangan akses ke data

Related Issue

• Fixes Halaman Unduhan Dokumen hanya menampilkan data sesuai default pagination API (10 data) #1721 — Pagination DataTables pada Halaman Unduhan Tidak Berfungsi

Testing Checklist

• Buka /unduhan/form-dokumen — ubah dropdown "Tampilkan 10 data" ke 5/25/50/100, pastikan pagination dan jumlah record berubah sesuai
• Buka /unduhan/prosedur — uji hal yang sama
• Buka /unduhan/regulasi — uji hal yang sama
• Pastikan navigasi pagination (halaman 1, 2, 3, ...) menampilkan halaman yang benar
• Pastikan modal detail dokumen/prosedur/regulasi tetap berfungsi setelah perubahan
• Browser test: npm run test:browser jika tersedia

Technical Details

Struktur Response API

API mengembalikan JSON:API format dengan meta.pagination:

{
  "data": [...],
  "meta": {
    "pagination": {
      "total": 50,
      "count": 10,
      "per_page": 10,
      "current_page": 1,
      "total_pages": 5
    }
  }
}

Mengapa dataSrc sebagai callback?

DataTables serverSide: true membaca recordsTotal/recordsFiltered dari response JSON (bukan dari config). Dengan dataSrc sebagai callback, kita menyuntikkan nilai tersebut ke objek JSON sebelum DataTables memprosesnya:

dataSrc: function(json) {
    json.recordsTotal = json.meta?.pagination?.total ?? 0;
    json.recordsFiltered = json.meta?.pagination?.total ?? 0;
    return json.data;
}

Breaking Changes

Tidak ada. Perubahan hanya pada sisi view (Blade) dan kompatibel dengan API yang sudah ada.

Video

simplescreenrecorder-2026-09-02_14.38.33.mp4

simplescreenrecorder-2026-09-02_14.46.11.mp4

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