[활용팁] 페이지에 숫자 입력창 만들기

https://sir.kr/g5_tip/19034?page=10 

위 sir에서부터 시작해봤던건데 구글하면서 이것저것 짜집기하면서 해보면서

코어를 안건드리고 해보려고 시도해봤어요

수정이나 조언해주실게 있다면 해주시면 감사하겠어요

우선 취지는 제 경우는 자료실에 자료가 500페이지가 넘어가는데 검색으로 못찾고

버튼으로 뒤로 하염없이 가면서 긴가민가 찾는분들때문에

숫자로 원하는 페이지로 점프 시키려고 한거라

특수목적이다보니, 대다수분들은 필요가 없을거라 생각듭니다

최종적으로 하게되면 아래 그림처럼, 페이지네이션 아래 이동버튼과 숫자입력칸이 나오게되요

게시판 보드에서

제일 밖에 있는 list.skin.php 에서 수정을 합니다

스타일은 따로 잡아넣으셔도 되고

상단에

.page-input-container {

    margin-top: 10px;

    text-align: center;

}

.page-input-container .serach-intext {

    display: inline-block;

    background-color: #eee;

    width: 40px;

    height: 32px;

    line-height: 32px;

    text-align: center;

    font-size: 13px;

    border-style: none;

    border: 1px solid #ddd;

}

.page-input-container .serach-intext-btn {

    display: inline-block;

    padding: 6px 8px;

    line-height: 1.42857143;

    background-color: #fff;

    border: 1px solid #ddd;

    width: auto;

    min-width: 32px;

    max-width: max-content;

    height: 32px;

    font-size: 12px;

    margin-left: 3px;

}

요렇게 대충 제가 만든스타일을 상단에 배치시킨후

이렇게 기존에, 이전검색 그리고 다음검색 있는 아래 부분에 ( 보드마다 다를수도 있는데 대충 이전검색 다음검색 다음부분 )

===================================================

이 아래부분을 넣어주세요

$(function () {

    function goToPage(page) {

        var baseUrl = $('#gotopg').data('url'); // 데이터 속성에서 기본 URL을 가져옵니다.

        var safePage = parseInt(page, 10);

        if (isNaN(safePage) || safePage < 1) {

            alert('유효한 페이지 번호를 입력해주세요.');

            return; // 유효하지 않은 입력에 대한 처리

        }

        var newUrl = baseUrl + safePage; // 새 URL 생성

        window.location.href = newUrl; // 생성된 URL로 이동

    }

    $('#goinput').change(function() {

         var page = $(this).val();

        goToPage(page);

    });

    $('#goinput').keypress(function(event) {

        if (event.keyCode === 13) { // Enter 키 처리

            event.preventDefault(); // 기본 동작 방지

            var page = $(this).val();

            goToPage(page);

        }

    });

    $('#gotopg').click(function(event) {

        event.preventDefault(); // 버튼의 기본 동작 방지

        var page = $('#goinput').val();

        goToPage(page);

    });

});

이걸 넣어주시면 끝나요

최대한 XSS 생각해보면서 해봤는데 이렇게 하는게 맞는지는 모르겠어요

일딴 작동은 잘되는거 같은데

테스트로 해보실분 계시다면 기존파일 잘 보관하시면서 한번 해보셔도 될듯 해요