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

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

· 2년 전 · 1760 · 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년 전
좋은 팁 감사 합니다.
감사합니다!!

게시글 목록

번호 제목
20141
20129
20120
20114
20106
20099
20097
20091
20050
20042
20039
20010
19996
19978
19969
19954
19911
19908
19907
19905
19904
19892
19882
19864
19861
19844
19831
19829
19820
19805