[원본수정] github 형식 페이징
깃헙 형식 페이징입니다.
이런 페이징을 한 번 써보고 싶어서 급하게 수정해 봤는데 어떤 오류가 있는지 모르겠네요... ㅎㅎ

페이지 번호를 쭉 나열하는 게 아니라, [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]
실제 적용한 샘플입니다.

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개
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4402 | ||
| 2274 | 2년 전 | 2065 | ||
| 2273 |
|
2년 전 | 1486 | |
| 2272 | 2년 전 | 2468 | ||
| 2271 | 2년 전 | 2069 | ||
| 2270 |
|
2년 전 | 2089 | |
| 2269 |
|
2년 전 | 1891 | |
| 2268 | 2년 전 | 3846 | ||
| 2267 | 2년 전 | 2898 | ||
| 2266 |
|
2년 전 | 2122 | |
| 2265 | 2년 전 | 1642 | ||
| 2264 | 2년 전 | 2123 | ||
| 2263 | 2년 전 | 1991 | ||
| 2262 | 2년 전 | 1540 | ||
| 2261 |
|
2년 전 | 1452 | |
| 2260 | 2년 전 | 2441 | ||
| 2259 |
welcome
|
2년 전 | 1778 | |
| 2258 |
welcome
|
2년 전 | 1305 | |
| 2257 | 2년 전 | 3052 | ||
| 2256 | 2년 전 | 1316 | ||
| 2255 |
|
2년 전 | 1822 | |
| 2254 | 2년 전 | 1796 | ||
| 2253 |
welcome
|
2년 전 | 1570 | |
| 2252 |
welcome
|
2년 전 | 1341 | |
| 2251 | 2년 전 | 2396 | ||
| 2250 | 2년 전 | 2031 | ||
| 2249 | 2년 전 | 1817 | ||
| 2248 | 2년 전 | 1627 | ||
| 2247 | 2년 전 | 2053 | ||
| 2246 | 2년 전 | 2466 | ||
| 2245 | 2년 전 | 1917 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기