하단 페이징에 페이지 입력창 넣기 > 그누보드5 팁자료실

그누보드5 팁자료실

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

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

첨부파일

페이징입력창추가.png (14.4K) 3회 다운로드 2022-08-29 14:02:54

본문

안녕하세요..

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

예) 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 클릭시 이동후 초기값 변경 : 마지막페이지 + 1
        })
    });
</script>

 

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

 

 

 

추천
14

댓글 8개

페이징 css 는 다른 사이트에서 복사하여 사용하기 때문에 오픈해도 될지 모르겠습니다....그래서 여기에는 별도로 표기는 하지 않았습니다. 데모 페이지를 참조하시면 비슷한 css를 찾아 보실수 있습니다.
관리자 페이지 - 환경설정 - 기본환경 - 페이지 표시 수 10을 5로 하셔도
이 팁 그대로 적용이 잘됩니다. 이동 후 변경된 입력 기본값은 보여지는 페이지 끝 +1 이 됩니다.
전체 2,167 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT