AJAX 페이지네이션

public function data(): ResponseInterface
{
    $page    = max(1, (int) ($this->request->getGet('page')     ?? 1));
    $perPage = max(5, min(50, (int) ($this->request->getGet('per_page') ?? 10)));
    $search  = trim($this->request->getGet('q') ?? '');
    $sort    = $this->request->getGet('sort') ?? 'id';
    $dir     = $this->request->getGet('dir')  ?? 'desc';

    // 허용 컬럼만 정렬 (SQL Injection 방지)
    $allowed = ['id', 'title', 'author', 'views', 'created_at'];
    if (! in_array($sort, $allowed, true)) $sort = 'id';
    $dir = $dir === 'asc' ? 'asc' : 'desc';

    $model = new PostModel();

    if ($search !== '') {
        $model->groupStart()
              ->like('title', $search)
              ->orLike('author', $search)
              ->groupEnd();
    }

    $model->orderBy($sort, $dir);
    $posts = $model->paginate($perPage, 'default', $page);
    $pager = $model->pager;

    return $this->response->setJSON([
        'data'      => $rows,       // 현재 페이지 행
        'total'     => $pager->getTotal(),
        'page'      => $pager->getCurrentPage(),
        'per_page'  => $pager->getPerPage(),
        'last_page' => $pager->getPageCount(),
        'from'      => ($page-1)*$perPage + 1,
        'to'        => min($page*$perPage, $total),
    ]);
}

// 상태 객체 하나로 모든 파라미터 관리
const state = { page: 1, perPage: 10, q: '', sort: 'id', dir: 'desc' };

async function loadData() {
    const params = new URLSearchParams(state);
    const res    = await fetch('/examples/ajax-pagination/data?' + params);
    const json   = await res.json();

    renderTable(json.data);
    renderPagination(json);

    // URL 업데이트 (뒤로가기·즐겨찾기 지원)
    history.pushState(state, '', location.pathname + '?' + params);
}

// 뒤로가기 버튼 처리
window.addEventListener('popstate', e => {
    if (e.state) Object.assign(state, e.state);
    loadData();
});

function renderPagination({ page, last_page }) {
    // 현재 페이지 주변 ±2, 양끝 1·last_page 항상 표시
    const pages = new Set([1, last_page]);
    for (let i = page - 2; i <= page + 2; i++) {
        if (i >= 1 && i <= last_page) pages.add(i);
    }
    const sorted = [...pages].sort((a, b) => a - b);

    let html = '<ul class="pagination pagination-sm mb-0">';
    html += `<li class="page-item ${page===1?'disabled':''}">
                <a class="page-link" href="#" data-page="${page-1}">&laquo;</a></li>`;

    let prev = 0;
    for (const p of sorted) {
        if (p - prev > 1) html += `<li class="page-item disabled"><span class="page-link">…</span></li>`;
        html += `<li class="page-item ${p===page?'active':''}">
                    <a class="page-link" href="#" data-page="${p}">${p}</a></li>`;
        prev = p;
    }

    html += `<li class="page-item ${page===last_page?'disabled':''}">
                <a class="page-link" href="#" data-page="${page+1}">&raquo;</a></li>`;
    html += '</ul>';
    paginationEl.innerHTML = html;
}

let debounceTimer;

searchInput.addEventListener('input', () => {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
        state.q    = searchInput.value.trim();
        state.page = 1;   // 검색 시 1페이지로 리셋
        loadData();
    }, 350);   // 350ms 후 요청 (타이핑 중 과도한 요청 방지)
});

// 페이지 로드 시 URL 쿼리스트링으로 상태 복원
const qs = new URLSearchParams(location.search);
state.page    = parseInt(qs.get('page'))     || 1;
state.perPage = parseInt(qs.get('per_page')) || 10;
state.q       = qs.get('q')    || '';
state.sort    = qs.get('sort') || 'id';
state.dir     = qs.get('dir')  || 'desc';

// UI에 반영
searchInput.value          = state.q;
perPageSelect.value        = state.perPage;

loadData();   // 복원된 상태로 최초 로드