UIPagination modified by Anonymous

Anonymous — Wed, 25 Mar 2015 11:09:17 -0000

Pagination

한 페이지에 표시하기 어려운 목록 콘텐츠를 여러 페이지로 분할할 때 현재 페이지의 위치를 알고 다른 페이지로 쉽게 이동할 수 있는 UI이다.

Basics

다음은 Pagination 패턴을 구현한 템플릿 예제이다. 템플릿을 실행하기 전에 PageHandler 객체가 $page_navigation에 반드시 할당되어 있어야 한다.

<form action="./" class="pagination" cond="$page_navigation">
    <input type="hidden" name="error_return_url" value="" />
    <input type="hidden" name="module" value="{$module}" />
    <input type="hidden" name="act" value="{$act}" />
    <input cond="$order_target" type="hidden" name="order_target" value="{$order_target}" />
    <input cond="$order_type" type="hidden" name="order_type" value="{$order_type}" />
    <input cond="$category_srl" type="hidden" name="category_srl" value="{$category_srl}" />
    <input cond="$childrenList" type="hidden" name="childrenList" value="{$childrenList}" />
    <input cond="$search_keyword" type="hidden" name="search_keyword" value="{$search_keyword}" />

    <a href="{getUrl('page', '')}" class="direction">&laquo; FIRST</a>
    <block cond="$page_navigation->first_page + $page_navigation->page_count > $page_navigation->last_page && $page_navigation->page_count != $page_navigation->total_page">
        {@$isGoTo = true}
        <a href="{getUrl('page', '')}">1</a>
        <a href="#goTo" class="tgAnchor" title="{$lang->cmd_go_to_page}">...</a>
    </block>
    <block loop="$page_no = $page_navigation->getNextPage()">
        {@$last_page = $page_no}
        <strong cond="$page_no == $page">{$page_no}</strong>
        <a cond="$page_no != $page" href="{getUrl('page', $page_no)}">{$page_no}</a>
    </block>
    <block cond="$last_page != $page_navigation->last_page">
        {@$isGoTo = true}
        <a href="#goTo" class="tgAnchor" title="{$lang->cmd_go_to_page}">...</a>
        <a href="{getUrl('page', $page_navigation->last_page)}">{$page_navigation->last_page}</a>
    </block>
    <a href="{getUrl('page', $page_navigation->last_page)}" class="direction">LAST &raquo;</a>
    <span cond="$isGoTo" id="goTo" class="tgContent">
        <input name="page" title="{$lang->cmd_go_to_page}" />
        <button type="submit">Go</button>
    </span>
</form>

jQuery Plugin

이 패턴은 페이지를 읽어들일 때 자동으로 실행되기 때문에 페이지 요소를 동적으로 생성하는 경우에는 적용되지 않는 문제가 있다. 다음과 같이 동적으로 생성한 pagination 요소를 선택한 후 xePagination 메소드를 실행하면 페이지를 읽어들인 뒤에도 스크립트를 적용할 수 있다.

$('.pagination').xePagination();

Recent changes to UIPagination

UIPagination modified by Anonymous

Pagination

Basics

jQuery Plugin