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

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

· 3년 전 · 4217 · 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를 클릭하고 들어갔는데 중간에 엔터를 입력시에 리스트페이지 이동을한다면...
좀 그렇죠... 아마 이게 뭐냐고 말이죠..

게시글 목록

번호 제목
24318
24317
24315
24309
24294
24293
24277
24262
24260
24253
24251
24236
24233
24228
24226
24221
24214
24203
24201
24199
24196
24195
24194
24192
24191
24187
24185
24183
24172
24168