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

안녕하세요..

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

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

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

 

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

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

 

// 한페이지에 보여줄 행, 현재페이지, 총페이지수, 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 .= ' GO ';
        $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 "";
}

 

 

2.  해당 list.skin.php 에서

만약 feather.js가 없으시면

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

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

 

<!-- 페이지  -->
<?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 클릭시 이동후 초기값 변경 : 시작페이지 + 10
        })
    });
</script>

 

 

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