TERASOLUNA Server Framework for Java(5.x)에서 제공하는 JSP 태그인 "pagination" 을 이용하면, Bootstrap 3의 페이지 네이션 구성 요소 에 대한 CSS를 그대로 이용할 수 있었습니다만, Bootstrap 4라고 그대로 이용할 수 없었습니다(일부 커스터마이즈 포인트가 준비되어 있습니다만, 그 커스터마이즈 포인트를 이용해도 제대로 이용할 수 없었다···).
그래서 ... 오늘은 TERASOLUNA의 pagination 태그를 Bootstrap 3에서 4로 마이그레이션하는 방법 (잠정 대처)을 소개합니다.

Bootstrap 3 사용 시 UI

TERASOLUNA의 pagination 태그를 이용하면 ...

<t:pagination page="${page}" criteriaQuery="${f:query(accountsSearchQuery)}"
              outerElementClass="pagination" />

다음과 같은 페이지 네이션 링크를 볼 수 있습니다.

Bootstrap 4 사용 시 UI(대책 없음)

아무것도하지 않고 Bootstrap 4를 적용하면 ... 다음과 같은 불행한 일이됩니다.

Bootstrap 4의 페이지 네이션 구성 요소

Bootstrap 4의 페이지 네이션 구성 요소 의 문서를 보면 ... 아무래도 page-item 이나 page-link 와 같은 클래스를 지정해 두지 않으면 스타일이 적용되지 않는 것을 알았습니다.

Bootstrap 4 이용시의 UI(대책을 시도한다-그 1-)

TERASOLUNA의 pagination 태그에는 동작을 커스터마이즈하기 위한 옵션이 준비되어 있으므로, 그 옵션을 변경하는 것으로 대응할 수 있는지 시험해 보겠습니다.

옵션을 조사한 결과로서・・・.

<t:pagination page="${page}" criteriaQuery="${f:query(accountsSearchQuery)}"
              outerElementClass="pagination" 
              activeClass="page-item active" 
              disabledClass="page-item disabled" />

이 상태에서 화면을 열면 ... 불행히도 아무것도 변화가 없습니다.

Bootstrap 4 이용시의 UI(대책 시도-그 2-)

그리고는 page-item 를 지정할 수 있으면 좋을 것 같기 때문에···JavaScript(이번은 jQuery)를 이용해 페이지 표시시에 클래스를 추가해 보기로 해 보았습니다.

JavaScript에서 page-link를 추가하는 방법

$('.pagination a').addClass('page-link');

이 상태에서 화면을 열면 ... ~ ~ 같은 UI가되었습니다

Bootstrap 4 이용시의 UI(대책을 시도한다-그 3-)

외형상은 문제인 것입니다만・・・ 문득 개발자 툴로 DOM의 상태를 들여다 보면・・・ page-link 가 적용되어 있지 않은 곳이 있었습니다.



이번에는 이 부분도 JavaScript(이번은 jQuery)를 이용하여 페이지 표시시에 클래스를 추가해 보려고 했습니다.

JavaScript에서 page-item을 추가하는 방법

$('.pagination li').addClass('page-item'); // 追加
$('.pagination a').addClass('page-link');

page-link

Bootstrap 4 이용시의 UI(대책을 시도한다-그 4-)

Bootstrap 3에서는 현재 페이지(활성 페이지)의 링크에 마우스 커서를 놓으면 핸드 포인터가 되지 않고 화살표 포인터로 유지됩니다. 즉...링크를 누를 수 없을 때의 UI가 됩니다만...Bootstrap 4에서는 핸드 포인터가 되어 버립니다. TERASOLUNA의 pagination 태그의 기본 동작에서 현재 페이지(활성 페이지)의 링크가 비활성화되어 있으므로 핸드 포인터가 아닌 화살표 포인터가 됩니다.

활성 페이지의 커서를 화살표 포인터로 변경하는 방법

.page-item.active > .page-link {
    cursor: default;
}

요약

이번은 JavaScript(jQuery)를 이용해, (약간 무리하게 ... ) Bootstrap 4로 해석할 수 있는 DOM 상태로 하는 것으로 페이지네이션 컴퍼넌트의 CSS를 적용하는 방법(잠정 대처)을 소개했습니다 . 이 방법은 어디까지나 잠정적인 대처라고 생각하고 있기 때문에・・・.