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

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

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

게시글 목록

번호 제목
22569
22566
22565
22559
22530
22527
22525
22521
22518
22506
22500
22490
22487
22481
22480
22473
22471
22468
22453
22449
22440
22436
22435
22415
22407
22404
22376
22364
22362
22353