How to adjust the HTML output of wicket Pagingnavigator

This is the default template:

<wicket:panel><a wicket:id= "First" class= "first" >&lt;&lt;</a><a wicket:id= "prev" class= "prev" >&lt;</a><span wicket:id= "navigation" class= "goto" ><a wicket:id= "Pagelink" href= "#" ><span wicket:id= "pagenumber" >5</span></a></span><a wicket:id= "Next" class= "next ">&gt;</a><a wicket:id=" Last "class=" The Last ">&gt;&gt;</a></wicket:panel>

Of course, the outermost tag is determined by the template of the component. For example, a perimeter div:

<div wicket:id= "Mypaginator" ></div>

Now suppose you need the purecss style of Pagingnavigator, and its HTML is as follows:

<ul class= "Pure-paginator" > <li><a class= "Pure-button prev" href= "#" >& #171; </a></li > <li><a class= "Pure-button" href= "#" >1</a></li> <li><a class= "Pure-button pure- Button-active "href=" # ">2</a></li> <li><a class=" Pure-button "href=" # ">3</a></ li> <li><a class= "Pure-button" href= "#" >4</a></li> <li><a class= "Pure-button" hr ef= "#" >5</a></li> <li><a class= "Pure-button Next" href= "#" >& #187; </a></li ></ul>

It can be seen that the difference between the two is still many. Let's look at the possible methods:

1. Create a new class and inherit the Pagingnavigator.

     For example, the class name is pagingnavigator, then set up the corresponding template file pagingnavigator.html, the contents are as follows:

The pagingnavigator of this kind of painting is the purecss style. But also need to perfect, the current page style, no last page when the button should be disabled. That is to say, depending on the current page, add pure-button-disabled, or pure-button-active style.

To achieve this, we need to delve deeper into the Pagingnavigator class and see where we can implement this functionality.

In contrast to the above template, where wicket:id= "navigation" corresponds to the pagingnavigation component, one of the methods is:

 @Overrideprotected  void populateitem (final  loopitem loopitem) {// get the index of page this link shall  point tofinal long pageindex = getstartindex ()  + loopItem.getIndex () ;// add a page link pointing to the pagefinal abstractlink  Link = newpagingnavigationlink ("Pagelink",  pageable, pageindex); Link.add (new  Titleappender (PageIndex)); Loopitem.add (link);// add a page number label to  the list which is enclosed by the linkstring label =  ""; if   (labelprovider != null) {Label = labelprovider.getpagelabel (pageIndex);} Else{label = string.valueof (pageindex + 1);} Link.add (New label ("PageNumber",  label));} 

Where Titleappender is used to add the link's Title property, so the mouse pointer to the top of the time will be prompted, such as Goto 2 page and so on. Next is the label, which is the corresponding component of the pagenumber.

This method can be used to modify the label according to the situation (Attributemodifier), and finally achieve the desired effect.

How to adjust the HTML output of wicket Pagingnavigator