안녕하세요 : )

오늘은 PHP기반 웹개발에서 사용되는 간단한 페이지네이션 기능을 만들어보려고 합니다.

 페이지네이션은 테이블 형식의 목록에서 행의 개수가 너무 많아지면 페이지가 아래로 길어지게 되는데 이럴 때 한 페이지당 몇 개의 항목만 보여지고 그 이후로는 번호 클릭을 통해 페이지를 넘겨서 항목을 열람할 수 있는 기능입니다.

 페이지네이션 이름을 그냥 페이지네이션으로만 하면 너무 흔하고 재미가 없을 것 같아서 제 이름의 성 park과 pagination을 합쳐서 parkination으로 만들었습니다 : )

아래의 사진은 오늘 만들 페이지네이션의 최종 결과입니다.

1. CSS 적용

.parkination {
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 5px;
    text-align: center;
}
.parkination > ul li {
    display: inline-block;
    padding: 7px;
    font-size: 13px;
    font-weight: bold;
}
.parkination > ul li.on {
    color: red;
    pointer-events: none;
}

위와 같이 페이지네이션이 적용될 웹페이지에 css를 적용시켜주세요!

2. 페이지네이션 클래스 정의

<?
defined('BASEPATH') OR exit('No direct script access allowed');
 
class Parkination {
 
    private $cntRowAll = 0;                // 릴레이션의 카디널리티
    private $cntRowPerPage = 10;        // 한 페이지 당 보여줄 레코드 개수
    private $cntPagePerBlock = 10;        // 한 화면에 보여줄 페이지 개수
    private $pageURL = '#';                // 페이지 선택 시 이동할 경로
 
    // 페이지네이션 전체 div와 ul 태그
    private $beginTag = '<div class="parkination"><ul>';
    private $endTag = '</ul></div>';
 
    private $currentPage = -1;            // 현재 선택된 페이지
 
    function __construct()
    {
    }   
    
    // 맴버 변수 초기화
    public function initialize(array $params = array())
    {
        foreach ($params as $key => $val)
        {
            if (property_exists($this, $key))
            {
                $this->$key = $val;
            }
        }
        return $this;
    }
    
    // 페이지네이션 html 소스 생성 메소드
    public function create()
    {
        // 현재 페이지 옵션을 설정하지 않으면 html 소스대신 에러문구 출력
        if ($this->currentPage == -1)
            return "Failed to create parkination. Please set the 'currentPage' property.";
 
        // 리턴할 최종 html소스
        $htmlText = '';
 
        // 페이지네이션 전체 div와 ul태그 열기
        $htmlText .= $this->beginTag;
 
        // 릴레이션의 카디널리티로 총 페이지 개수 계산
        $totalPage = ($this->cntRowAll / $this->cntRowPerPage) + 1;
 
        // 현재 페이지에서 출력할 페이지 번호 범위 계산
        $startPage = (ceil($this->currentPage / $this->cntPagePerBlock) - 1) * $this->cntPagePerBlock + 1;
        $endPage = ($startPage + $this->cntPagePerBlock);
        $endPage = ($endPage < $totalPage) ? $endPage : $totalPage;
 
        // 이전 페이지 버튼 생성
        $htmlText .= $this->getPrevTag();
 
        // 각 페이지 버튼 생성
        for ($i = $startPage; $i < $endPage; $i++)
        {
            if ($i == $this->currentPage) {
                $htmlText .= '<li class="on">'.$i.'</li>';
            } else {
                $htmlText .= '<li><a href="'.$this->pageURL.$i.'">'.$i.'</a></li>';
            }
        }
 
        // 다음 페이지 버튼 생성
        $htmlText .= $this->getNextTag($totalPage);
 
        // 페이지네이션 전체 div와 ul태그 닫기
        $htmlText .= $this->endTag;
        
        return $htmlText;
    }
 
    // 이전 페이지 버튼 생성 메소드
    private function getPrevTag()
    {
        $prevIdx = $this->currentPage - 1;
        if ($prevIdx < 1) {
            return '<li>prev</li>';
        } else {
            return '<li><a href="'.$this->pageURL.$prevIdx.'">prev</a></li>';
        }
    }
 
    // 다음 페이지 버튼 생성 메소드
    private function getNextTag($endPage)
    {
        $nextIdx = $this->currentPage + 1;
        if ($nextIdx >= $endPage) {
            return '<li>next</li>';
        } else {
            return '<li><a href="'.$this->pageURL.$nextIdx.'">next</a></li>';
        }
    }
 
    // DBMS에서 쿼리 중 LIMIT할 때 시작 레코드 인덱스 리턴
    public function getStartIndex()
    {
        return (($this->currentPage - 1) * $this->cntRowPerPage);
    }
 
    public function getEndIndex()
    {
        return $this->currentPage * $this->cntRowPerPage;
    }
 
    public function getCntRowPerPage()
    {
        return $this->cntRowPerPage;
    }
 
}
 
?>

Codeigniter 프레임워크를 사용하시는 분들은 /application/libraries 디렉토리 안에 위의 PHP파일을 만들어주셔야합니다!

3. 페이지네이션 클래스 파일 생성 및 설정

<?
$conf = array(
    'cntRowAll' => 총 테이블 데이터 개수,
    'cntRowPerPage' => 한 페이지당 보여질 데이터 개수,
    'cntPagePerBlock' => 한 화면에 보여질 페이지 개수,
    'pageURL' => 페이지 선택 시 이동할 경로(페이지번호 제외),
    'currentPage' => 현재 페이지 번호
);
$this->load->library('parkination');
$this->parkination->initialize($conf);
$parkination = $this->parkination->create();
 
echo $parkination;
?>

Codeigniter 프레임워크를 사용하시는 분들은 위와 같이 Controller클래스 안에 사용하시면 될 것 같고 프레임워크를 사용하지 않으시는 분들은 아래와 같이 사용하시면 될 것 같습니다.

<?
$conf = array(
    'cntRowAll' => 총 테이블 데이터 개수,
    'cntRowPerPage' => 한 페이지당 보여질 데이터 개수,
    'cntPagePerBlock' => 한 화면에 보여질 페이지 개수,
    'pageURL' => 페이지 선택 시 이동할 경로(페이지번호 제외),
    'currentPage' => 현재 페이지 번호
);
$builder = new Parkination();
$builder->initialize($conf);
$parkination = $builder->create();
 
echo $parkination;
?>

옵션값 중 cntRowPerPage와 cntPagePerBlock 값은 선택 사항이며 기본값은 10개씩 입니다.

pageURL은 페이지네이션의 번호를 선택했을 때 이동할 경로를 넣어주면 되는데 예를 들어 /blog.php?page= 이렇게 넣어주시면 페이지네이션 클래스 파일 안에서 pageURL 문자열 뒤에 이동할 페이지 번호가 붙어서 a태그 경로에 들어가게됩니다.

Codeigniter의 세그먼트를 이용하시는 분들은 /blog/list/page/ 이렇게 넣어주시면 될 것 같습니다.

페이지네이션의 최종 html소스는 11번째 줄 $parkination에 담기게 됩니다.

 이상 간단한 페이지네이션 기능을 구현해봤습니다!

궁금하신 사항이나 부족한 부분에 대해서 댓글 남겨주시면 감사드리겠습니다 : )