Wicket Bootstrap用の Pagenation

Wicket jQuery CSS

昨日の投稿、WicketのPagingNavigatorで、先頭(first)と末尾(last)を表示させない方法 - Oboe吹きプログラマの黙示録
に続いて、Wicket で、Bootstrap用の PagingNavigator を作りました。
↓ 以下のような描画になります。（色は別にＣＳＳで指定）
f:id:posturan:20181017212338j:plain
まず、Bootsrap をページで読むようにします。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

（注意）この link タグ、タグの終わりを rel="stylesheet"> と書いてしまうと、
Wicket のAJAX デバッガで
ERROR: Error in parsing: This page contains the following errors:error on line 4 at column 8:
Opening and ending tag mismatch: link line 0 and head
と怒られてしまいます。無視しても悪さはないと思いますが鬱陶しいので、
ちゃんと タグ終了、 /> を書きます。

org.apache.wicket.markup.html.navigation.paging.PagingNavigator を参考にBootstrap用の PagingNavigator を
用意します。

import org.apache.wicket.Component;
import org.apache.wicket.behavior.Behavior;
import org.apache.wicket.markup.ComponentTag;
import org.apache.wicket.markup.html.link.AbstractLink;
import org.apache.wicket.markup.html.navigation.paging.IPageable;
import org.apache.wicket.markup.html.navigation.paging.IPagingLabelProvider;
import org.apache.wicket.markup.html.navigation.paging.PagingNavigation;
import org.apache.wicket.markup.html.navigation.paging.PagingNavigationIncrementLink;
import org.apache.wicket.markup.html.navigation.paging.PagingNavigationLink;
import org.apache.wicket.markup.html.panel.Panel;
/**
 * Bootstrap 用 PagingNavigator
 */
public class BootstrapPagingNavigator extends Panel{
   private static final long serialVersionUID = 1L;
   private PagingNavigation pagingNavigation;
   private final IPageable pageable;
   private final IPagingLabelProvider labelProvider;
   /**
    * Constructor.
    */
   public BootstrapPagingNavigator(final String id, final IPageable pageable){
      this(id, pageable, null);
   }
   /**
    * Constructor.
    */
   public BootstrapPagingNavigator(final String id, final IPageable pageable
, final IPagingLabelProvider labelProvider){
      super(id);
      this.pageable = pageable;
      this.labelProvider = labelProvider;
   }
   public final IPageable getPageable(){
      return pageable;
   }
   @Override
   protected void onInitialize(){
      super.onInitialize();
      pagingNavigation = new PagingNavigation("navigation", pageable, labelProvider);
      add(pagingNavigation);

      add(new PagingNavigationIncrementLink<Void>("prev", pageable, -1)
            .add(new TitleAppender("Go to previous")));
      add(new PagingNavigationIncrementLink<Void>("next", pageable, 1)
            .add(new TitleAppender("Go to next")));
   }
   /**
    * Create a new pagenumber link.
    */
   protected AbstractLink newPagingNavigationLink(String id, IPageable pageable, int pageNumber){
      return new PagingNavigationLink<Void>(id, pageable, pageNumber);
   }
   /**
    * Gets the pageable navigation component for configuration purposes.
    * @return the associated pageable navigation.
    */
   public final PagingNavigation getPagingNavigation(){
      return pagingNavigation;
   }
   /**
    * Appends title attribute to navigation links
    */
   private final class TitleAppender extends Behavior{
      private static final long serialVersionUID = 1L;
      private final String title;
      public TitleAppender(String title){
         this.title = title;
      }
      @Override
      public void onComponentTag(Component component, ComponentTag tag){
         tag.put("title", title);
      }
   }
}

この Panel のHTMLです。

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns:wicket="http://wicket.apache.org">
<body>
<wicket:panel>
   <nav>
      <ul class="pagination">
         <li class="page-item">
            <a wicket:id="prev" rel="prev" class="page-link" aria-label="Previous">
               <span aria-hidden="true">&laquo;</span>
               <span class="sr-only">Previous</span>
            </a>
         </li>
         <li wicket:id="navigation" class="page-item">
            <a wicket:id="pageLink" class="page-link"><span wicket:id="pageNumber">1</span></a>
         </li>
         <li class="page-item">
            <a wicket:id="next" rel="next" class="page-link" aria-label="Next">
               <span aria-hidden="true">&raquo;</span>
               <span class="sr-only">Next</span>
            </a>
         </li>
      </ul>
   </nav>
</wicket:panel>
</body>
</html>

使用する側のHTML と CSS

<table>
   <tbody>
      <tr>
         <td>
            <div wicket:id="paging" class="page-navi"></div>
         </td>
         <td style="padding-left: 2rem"><span wicket:id="records">99</span> 件</td>
      </tr>
   </tbody>
</table>

ＣＳＳ、表示中のページ、及び、先頭ページなら previous のリンク、最終ページなら next のリンク
に、disabaled="disabled" が付くので、これに対してクリックしても無駄なことを表現するように
デザインします。 

.page-navi{
   padding: 10px 20px;
}
.page-navi table{
   border-spacing: 0;
   margin-bottom: 10px;
}
.page-navi a{
   padding: 2;
   text-decoration: none;
   font-size: 1.2rem;
   width: 4rem;
   text-align: center;
   background-color: #fbfad4;
}
.page-navi a[disabled='disabled']{
   color: #ff00ff !important;
   font-weight: bold;
}
.page-navi a[aria-label='Previous'][disabled='disabled'],
.page-navi a[aria-label='Next'][disabled='disabled']{
    color: #c0c0c0 !important;
}