/** * 공통 페이지네이션 스크립트 * * 기능: * - 쿠키 기반 per_page 값 관리 * - 페이지네이션 이벤트 핸들러 * - HTMX 연동 */ // ============================================ // 쿠키 헬퍼 함수 // ============================================ window.setCookie = function(name, value, days = 365) { const date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); const expires = "expires=" + date.toUTCString(); document.cookie = name + "=" + value + ";" + expires + ";path=/"; }; window.getCookie = function(name) { const nameEQ = name + "="; const ca = document.cookie.split(';'); for (let i = 0; i < ca.length; i++) { let c = ca[i]; while (c.charAt(0) == ' ') c = c.substring(1, c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); } return null; }; window.getPerPageFromCookie = function() { const savedPerPage = getCookie('pagination_per_page'); return savedPerPage ? savedPerPage : '10'; // 기본값 10 }; // ============================================ // 페이지네이션 이벤트 핸들러 // ============================================ // 페이지당 항목 수 변경 핸들러 window.handlePerPageChange = function(perPage) { // 쿠키에 저장 setCookie('pagination_per_page', perPage); // 현재 페이지의 HTMX 타겟 찾기 const target = document.querySelector('[hx-trigger*="filterSubmit"]'); if (target) { const perPageInput = document.getElementById('perPageInput'); const pageInput = document.getElementById('pageInput'); if (perPageInput && pageInput) { perPageInput.value = perPage; pageInput.value = 1; // 페이지를 1로 초기화 htmx.trigger(target, 'filterSubmit'); } } }; // 페이지 변경 핸들러 window.handlePageChange = function(page) { const target = document.querySelector('[hx-trigger*="filterSubmit"]'); if (target) { const pageInput = document.getElementById('pageInput'); if (pageInput) { pageInput.value = page; htmx.trigger(target, 'filterSubmit'); } } }; // ============================================ // 초기화 // ============================================ document.addEventListener('DOMContentLoaded', function() { // filterForm 찾기 const filterForm = document.getElementById('filterForm'); if (!filterForm) return; // hidden input이 이미 존재하는지 확인 let perPageInput = document.getElementById('perPageInput'); let pageInput = document.getElementById('pageInput'); // per_page input 생성 또는 업데이트 if (!perPageInput) { perPageInput = document.createElement('input'); perPageInput.type = 'hidden'; perPageInput.name = 'per_page'; perPageInput.id = 'perPageInput'; filterForm.appendChild(perPageInput); } perPageInput.value = getPerPageFromCookie(); // page input 생성 또는 업데이트 if (!pageInput) { pageInput = document.createElement('input'); pageInput.type = 'hidden'; pageInput.name = 'page'; pageInput.id = 'pageInput'; pageInput.value = '1'; filterForm.appendChild(pageInput); } }); // ============================================ // HTMX 이벤트 핸들러 // ============================================ // HTMX afterSwap: 테이블 새로고침 시 selectbox 재설정 document.body.addEventListener('htmx:afterSwap', function(event) { // selectbox 설정을 약간 지연시켜 DOM이 완전히 렌더링된 후 실행 setTimeout(function() { const perPageSelect = document.getElementById('perPageSelect'); if (perPageSelect) { // 쿠키에 저장된 값으로 selectbox 설정 (서버 값으로 덮어쓰지 않음) const cookieValue = getPerPageFromCookie(); perPageSelect.value = cookieValue; } }, 50); });