간단한 Pager 만들기
Pager 소스는 찾아보면 많이 있지만.. 간단하게 Prev, Next Page만 구현되고 현재 페이지 나오는 Pager를 직접 만들어보기로 해서 작업해보았습니다. COUNT Query를 이용하여 작업하면 간단합니다.
1. 페이지 세팅
if ($_REQUEST['page']) { $page = $_REQUEST['page']; } else $page = 1;
페이지가 세팅되어 있지 않으면 1페이지로 세팅합니다. 여기서 $page를 직접 쿼리에 넣는다면 SQL injection을 당할 수 있으므로 escaping이 필요합니다. 저같은 경우에는 서버단에서 세팅으로 '를 자동으로 escape 되게 시켜놓았기 때문에 따로 설정하진 않았습니다.
2. SQL Query
// Paging $sql = 'SELECT COUNT(*) FROM table'; $result = mysql_query($sql); $row = mysql_fetch_assoc($result); if ($row['COUNT(*)'] == 0) { $page_total_num = 0; } else { $page_total_num = floor(($row['COUNT(*)'] - 1) / 10) + 1; }
전체 페이지 수를 구합니다. 전체 페이지가 고정되어 있는 경우라면 따로 필요하지 않은데, 그냥 $page_total_num 에 그 고정값을 넣으면 되기 때문입니다.
3. Pager
<ul class="pager"> <?php echo $page . ' of ' . $page_total_num; ?> <li class="previous<?php if ($page >= $page_total_num ) echo ' disabled'; ?>"><a href="./?page=<?php echo ($page + 1); ?>&view_mode=<?php echo $vmode; ?>">← Older</a></li> <li class="next<?php if ($page == 1) echo ' disabled'; ?>"><a href="./?page=<?php echo ($page - 1); ?>&view_mode=<?php echo $vmode; ?>">Newer →</a></li> </ul>
실제 Pager를 HTML로 구현한 부분입니다. 저는 기본적으로 Bootstrap을 사용하여 구성하고 있으므로, Bootstrap을 사용하고 계신 분이라면 바로 결과를 확인하실 수 있습니다.
4. 실행결과
위 사진처럼 매우 심플한 결과를 확인하실 수 있습니다.
'Creation > Programming' 카테고리의 다른 글
[C/C++] int와 register int의 속도 차이 (1) | 2017.08.23 |
---|---|
[PhantomJS] 서버 열고 URL받아 스크랩하기 (0) | 2017.08.16 |
[Web] React로 보는 요즘 Web Front-end Style (0) | 2017.08.15 |
변화하는 Cross-domain iframe 높이 자동 조절 (3) | 2016.03.18 |
Javascript class 기초 개념 (128) | 2016.03.14 |
Google Appengine 시작하기 (0) | 2016.02.13 |
[안드로이드] 토글 버튼으로 타이머 작동/중지 컨트롤하기 (4) | 2014.10.31 |
Socket Programming - BrowserClient.c (1) | 2014.07.13 |
Mesh-connected computer partial sum(부분합) (10) | 2014.04.27 |
간단한 명령에는 jQuery 종속에서 벗어나자 (7) | 2014.04.25 |