테스트 사이트 - 개발 중인 베타 버전입니다

하단 페이징에 페이지 입력창 넣기

· 3년 전 · 4219 · 12
페이징입력창추가.png

안녕하세요..

가끔 페이징에 다른 페이지에 이동을 하려고 해도 

예) 11페이지로 이동을 할려면, 10페이지 먼저 클릭 후 다음페이지로 클릭해야 이동...

이런 경우가 있어서 약간의 팁으로 수정을 해 보았습니다.

 

1. 먼저 common.lib.php 를 약간 수정 합니다.

  한글 표시는 전부 feather-icon으로 대체 하였습니다.

 

[code]

// 한페이지에 보여줄 행, 현재페이지, 총페이지수, URL
function get_paging($write_pages, $cur_page, $total_page, $url, $add="")
{
    $url = preg_replace('#(&)?page=[0-9]*#', '', $url);
    $url .= substr($url, -1) === '?' ? 'page=' : '&page=';

    $str = '';
    if ($cur_page > 1) {
        $str .= '<a href="'.$url.'1'.$add.'" class="pg_page pg_start" title="Go to 1"><i data-feather="chevrons-left"></i></a>'.PHP_EOL;
    }

    $start_page = ( ( (int)( ($cur_page - 1 ) / $write_pages ) ) * $write_pages ) + 1;
    $end_page = $start_page + $write_pages - 1;

    if ($end_page >= $total_page) $end_page = $total_page;

    if ($cur_page > 1) $str .= '<a href="'.$url.($cur_page-1).$add.'" class="pg_page pg_prev" title="Go to '.($cur_page-1).'"><i data-feather="chevron-left"></i></a>'.PHP_EOL;

    if ($total_page > 1) {
        for ($k=$start_page;$k<=$end_page;$k++) {
            if ($cur_page != $k)
                $str .= '<a href="'.$url.$k.$add.'" class="pg_page">'.$k.'<span class="sound_only">Page</span></a>'.PHP_EOL;
            else
                $str .= '<span class="sound_only">열린</span><strong class="pg_current">'.$k.'</strong><span class="sound_only">Page</span>'.PHP_EOL;
        }
    }

    if ($cur_page < $total_page) $str .= '<a href="'.$url.($cur_page+1).$add.'" class="pg_page pg_next" title="Go to '.($cur_page+1).'"><i data-feather="chevron-right"></i></a>'.PHP_EOL;

    if ($cur_page < $total_page) {
        $str .= '<a href="'.$url.$total_page.$add.'" class="pg_page pg_end" title="Go to '.$total_page.'"><i data-feather="chevrons-right"></i></a>'.PHP_EOL;
    }

    if ($total_page > 10) {   //2022-08-29 추가
        if ($k >= $total_page) $k = $total_page;
        $str .= '&nbsp;GO&nbsp;';
        $str .= '<input type="text" id="goinput" class="pg_page" style="width: 40px;background:white;" value="'.$k.'" >';
        $str .= '<a href="'.$url.$k.'" id="gotopg" class="pg_page"><i data-feather="skip-forward"></i></a>'.PHP_EOL;
    }

    if ($str)
        return "<nav class=\"pg_wrap\"><span class=\"pg\">{$str}</span></nav>";
    else
        return "";
}

[/code]

 

2.  해당 list.skin.php 에서

만약 feather.js가 없으시면

<script src="<?php echo $board_skin_url ?>/feather.js"></script>

하시고,js파일을 다운로드 후 저장하시면 됩니다.

 

[code]

<!-- 페이지  -->
<?php echo $write_pages;  ?>

 

<script>
feather.replace();   //feather 아이콘 사용

$(function(){
    $(document).tooltip();  //페이징 처음,마지막에서 툴팁 
});

</script>

<script>
    $(function(){
        $('#goinput').change(function(){  // 입력(페이지) 변할 때
            var page = $(this).val();  //입력 받은 페이지 
            var href = $('#gotopg').attr('href');  //링크의 이전 주소
            var goto = href.replace(/&page=[0-9]*/gi,'&page=') + page;  // 이동페이지의 값을 입력 받은 페이지로 변경
            //console.log(page,href,goto)
            $('#gotopg').attr('href',goto);  // a 클릭시 이동후 초기값 변경 : 마지막페이지 + 1
        })
    });
</script>

[/code]

 

=>완성된 페이징은 그림처럼 되어집니다.

 

 

 

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 12개

2년 전
아하!!! *.* 그렇군요! 말씀하신걸 토대로 해보는데
제가 jquery 내용을 잘 몰라서~한참을 헤맸어요~
그누 구버전 이라서 그런지 어디서 연관된지는 모르겠지만 엔터를 치면 페이지이동은 안되지만 삭제할거냐는 문구가 뜨면서 삭제쪽이랑 연관이 되는 현상이 있어서

엔터를 지정해주려고 event.keyCode=='13' 로 엔터감지를 해보는데도 잘 안먹히더라구요
그래서
$('input[type="text"]').keydown(function() {
if (event.keyCode === 13) {
event.preventDefault();
};
});
값으로 엔터를 아에 막아놨는데..혹시나 저처럼 왕초보가 저같은 일을 겪게된다면
엔터를 막아놓는게 더 나을거 같다라는....
미터강님 조언 캄사합니다~~ 그리고 만드신 팁도 아주 자랑스럽게 잘 사용하겠습니다
한가지 더 첨언을 드리면,
이 팁은 페이징 중에 특정한 페이지로 바로 가기 위한 것 입니다.
그래서 엔터를 눌러서 페이지를 이동하게 된다면 현재 페이지에서
어떤 글을 링크하였을때... 좀 꼬일듯 합니다.
특정 subject를 클릭하고 들어갔는데 중간에 엔터를 입력시에 리스트페이지 이동을한다면...
좀 그렇죠... 아마 이게 뭐냐고 말이죠..

게시글 목록

번호 제목
23798
23797
23792
23791
23785
23781
23770
23766
23764
23761
23747
23732
23724
23718
23706
23700
23697
23686
23682
23681
23680
23678
23665
23644
23643
23639
23637
23630
23626
23616