smart pagination 만드는 방법

안녕하세요.
제가 현재 개발중인 싸이트에 계시판을 만드는중에 계시판아래에 보이는 Laravel의 default pagination이 좀 맘에 안들어서 여기저기서 찾아보고 알아봐서 Laravel에선 어떻게 pagination을 customize하는지 배운것과 제가 customize한 pagination을 나누려고 합니다.

먼저 아래에 제가 customize한 좀더 스마트하 pagination 예를 보세요. (btw, pagination을 한글로 뭐라고 하나요?)
계시판 아래에 보이는 pagination들만 짤라서 보여드립니다.

어떤가요? 좀 더 smart해 보이지않나요? ㅎㅎ

위에 보이는 pagination처럼 customize하시고 싶으시면 다음과 같이 하시면 됩니다.

  1. app/config/view.php 파일안에 pagination setting을 다음과같이 변경합니다.
    'pagination' => 'mango-pagination.php',

  2. mango-pagination.php 새파일을 app/views 폴더안에 만드신후 아래에 코드를 파일안에 덮어쓰시면 끝!

아주 간단하죠?

// views/mango-pagination.php
<?php
$presenter = new Illuminate\Pagination\BootstrapPresenter($paginator);
?>

<?php if ($paginator->getLastPage() > 1): ?>
<div class="pagination">
    <ul>
<?php
        /* Current Page */
        $currentPage = $paginator->getCurrentPage();

        /* How many pages need to be shown before and after the current page */
        $showBeforeAndAfter = ($currentPage >= 5) ? 5 : (10-$currentPage);

        $lastPage = $paginator->getLastPage();

        /* Check if the pages before and after the current really exist */
        $start = $currentPage - $showBeforeAndAfter;

        /*
            Check if first page in pagination goes below 1, and substract that from
            $showBeforeAndAfter var so the pagination won't start with page 0 or below
        */

        if($start < 1) {
            $diff = $start - 1;
            $start = $currentPage - ($showBeforeAndAfter + $diff);
        }


        $end = $currentPage + $showBeforeAndAfter;

        if($end > $lastPage) {
            $diff = $end - $lastPage;
            $end = $end - $diff;
        }


        if($currentPage > 1) {
            if($start > 1) {
                $url = $paginator->getUrl(1);
                echo $presenter->getPageLinkWrapper($url, '첫장');
            }
            echo $presenter->getPrevious('« 전페이지');
        }else{  // kludgy way to work around impossible css to make it look nice
            echo "<li><span style=\"visibility:hidden;\"></span></li>";
        }

        echo $presenter->getPageRange($start, $end);

        if($currentPage < $lastPage) {
            echo $presenter->getNext('다음페이지 »');
            if($end < $lastPage) {
                $url = $paginator->getUrl($lastPage);
                echo $presenter->getPageLinkWrapper($url, '끝장');
            }
        }else{  // kludgy way to work around impossible css to make it look nice
            echo "<li><span style=\"visibility:hidden;\"></span></li>";
        }
?>
    </ul>
</div>
<?php endif; ?>
// 끝

참고로, 만약 이 새파일을 views/layouts 같은곳에 관리하고 싶으시면 'pagination' => 'layouts.mango-pagination.php', 으로 고치면 되고요 (물론 파일이름도 바꾸셔도 되구요 ㅋㅋ)

또 위예사진에 보이는 pagination은 bootstrap 위에 flat-ui css를 이용한것입니다.
UI에는 너무 신경쓰시지 마시고 작동이 잘되는지 확인하시길.... 궁금한거 있으시면 알려주세요.

끝으로 코드에 보이시는 //kludge 코멘트와 else logic은 제가 flat-ui css와 씨름하다 포기하고 허벌라게 풀은것임니다.
꼭 필요한건아니니 (안보이는 <li><span>을 넣으니깐요) 빼셔도 괜찮구요.

그럼 이만...

comments powered by Disqus