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

[원본수정] github 형식 페이징

· 2년 전 · 1759 · 3

깃헙 형식 페이징입니다.

이런 페이징을 한 번 써보고 싶어서 급하게 수정해 봤는데 어떤 오류가 있는지 모르겠네요... ㅎㅎ

 

3717582117_1676511609.0341.png

 

페이지 번호를 쭉 나열하는 게 아니라, [Newer] [Older] 두 개 버튼만 제공합니다.

 

▒1페이지에서 [Newer] 버튼은 클릭할 수 없습니다.

▒마지막 페이지에서 [Older] 버튼은 클릭할 수 없습니다.

▒클릭할 수 있는 버튼은 btn-active 로 스타일을 정의합니다.

▒클릭할 수 없는 버튼은 btn-disabled 로 스타일을 정의합니다.

주의! 이 팁을 그대로 사용하시면 관리자 화면 등 전체 화면의 페이징이 변경됩니다.

 

lib/common.lib.php

[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 = '';

    $end_page = $write_pages - 1;

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

    $btn_class = 'disabled';
    if ($cur_page > 1) {
        $str .= '<a href="'.$url.($cur_page-1).$add.'" class="pg-prev">'.PHP_EOL;
        $btn_class = 'active';
    }
    $str .= '<span class="btn btn-'.$btn_class.'">Newer</span>'.PHP_EOL;
    if ($cur_page > 1) $str .= '</a>'.PHP_EOL;

    $btn_class = 'disabled';
    if ($cur_page < $end_page) {
        $str .= '<a href="'.$url.($cur_page+1).$add.'" class="pg-next">'.PHP_EOL;
        $btn_class = 'active';
    }
    $str .= '<span class="btn btn-'.$btn_class.'">Older</span>'.PHP_EOL;
    if ($cur_page < $end_page) $str .= '</a>'.PHP_EOL;

    if ($str)
        return '<nav class="pg_wrap"><span class="pg">'.$str.'</span></nav>';
    else
        return "";
}[/code]

 

 

실제 적용한 샘플입니다.

 

3717582117_1676511305.2106.png

 

Stylesheet

[code].pg_wrap .btn {font-weight:bold}

.btn {display:inline-block;margin:0;padding:0 10px;height:44px;line-height:42px;border-radius:13px;font-size:1.4rem}

.btn-active {background:#006cff;color:#fff}
.btn-disabled {background:#dde0e3;color:#b4bbc1}[/code]

 

font-size 단위는 사이트에 맞게 변경하시면 됩니다.

댓글 작성

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

로그인하기

댓글 3개

2년 전
감사합니다. ^^
2년 전
좋은 팁 감사 합니다.
감사합니다!!

게시글 목록

번호 제목
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