Pagination

• Upper Navigation
• Bottom Navigation
• Dependencies

Live example

See http://incubator.myxwiki.org/xwiki/bin/view/Main/ListWebSearch

"upperNav">Upper navigation ==

CSS

Filters CSS:

.searchFilters{
 clear: both;
 font-size: 90%;
}
#sortFilter{
 color: #888;
 padding: 5px;
 line-height: 16px;
}
#sortFilter a.sortType{
 color: #888;
}
#sortFilter a.sortType:hover{
 color: #4D4D4D;
}
#sortFilter a#currentSort{
 color: #4D4D4D;
 font-weight: bold;
}
#sortFilter a.sortType:focus,
#sortFilter a#currentSort:focus  {
    outline: dotted 1px #000;
}

Pagination with number of result pages displayed:

.paginationFilter {
 color: #888;
 height: 100%; 
 border-top: 1px solid #CCCCCC;
 padding: 2px 0px 5px 5px;
 display: block;
 line-height: 22px;
}
.resultsNo{
 float: left;
}
.resultsNo .currentResultsNo, .resultsNo .totalResultsNo{
 color: #888;
} 
.pagination{
 float: right;
 margin-right: 10px;
}
.pagination a{
 color: #888;
}
.pagination a:hover{
 color: #4D4D4D;
}
.pagination a.currentPagination{
 color: #4D4D4D;
 font-weight: bold;
}
.pagination a:focus {
    outline: dotted 1px #000;
}
.controlPagination{
 position:relative;
 width:42px;
 height:22px;
 overflow:hidden;
 margin:0!important;
 padding:0!important;
 float: right;
}
.controlPagination a{
 position:absolute;
 top:0;
 left:0;
 line-height:25px;
 outline:none;
 overflow:hidden;
 border:none;
}
.controlPagination a.prevPagination , 
.controlPagination a.noPrevPagination, 
.controlPagination a.nextPagination, 
.controlPagination a.noNextPagination {
 background-image:url($xwiki.getSkinFile("navigation.png"));
 width: 21px;
 height: 22px;
}
.controlPagination a.prevPagination {
 background-position:left top;
}
.controlPagination a.noPrevPagination{
 background-position:left bottom;
}
.controlPagination a.nextPagination {
 background-position:right top;
 left: 21px;
}
.controlPagination a.noNextPagination {
 background-position:right bottom;
 left: 21px;
}

HTML Code

<div class="searchFilters">

 <div id="sortFilter">
  $msg.get("xe.search.filters.sort") 
  <a href="" id="currentSort" title="$msg.get('xe.search.filters.relevance.title')">$msg.get("xe.search.filters.relevance")</a> 
  <a href="" class="sortType" title="$msg.get('xe.search.filters.date.title')">$msg.get("xe.search.filters.date")</a> 
  <a href="" class="sortType" title="$msg.get('xe.search.filters.rating.title')">$msg.get("xe.search.filters.rating")</a> 
  <a href="" class="sortType" title="$msg.get('xe.search.filters.popularity.title')">$msg.get("xe.search.filters.popularity")</a>
 </div>

 <div class="paginationFilter">

  <span class="resultsNo">$msg.get("xe.pagination.results") <span class="currentResultsNo">6-30</span> $msg.get("xe.pagination.results.of") <span class="totalResultsNo">50</span></span> 
 
  <span class="controlPagination">
   <a href="#" title="$msg.get('xe.pagination.page.prev.title')" class="prevPagination"></a>
   <a href="#" title="$msg.get('xe.pagination.page.next.title')" class="nextPagination"></a>
  </span>
  <span class="pagination">$msg.get("xe.pagination.page")
   <a href="" title="$msg.get('xe.pagination.page.title',['1'])">1</a> 
   <a href="" class="currentPagination" title="$msg.get('xe.pagination.page.title',['2'])">2</a> 
   <a href="" title="$msg.get('xe.pagination.page.title',['3'])">3</a> 
   <a href="" title="$msg.get('xe.pagination.page.title',['4'])">4</a> 
   <a href="" title="$msg.get('xe.pagination.page.title',['5'])">5</a> 
   <a href="" title="$msg.get('xe.pagination.page.title',['6'])">6</a> 
   <a href="" title="$msg.get('xe.pagination.page.title',['7'])">7</a> 
   <a href="" title="$msg.get('xe.pagination.page.title',['8'])">8</a> 
   <a href="" title="$msg.get('xe.pagination.page.title',['9'])">9</a>
  </span>
 </div>
</div>

"bottomNav"> Bottom Navigation ==

This is a lighter version of the Upper Navigation, keeping only the pagination controls.

CSS

Container:

.paginationFooter{
 display: block;
 clear: both;
 text-align: right;
 font-size: 90%;
}

Same as in Upper navigation (don't apply if both navigations are present):

.paginationFilter {
 color: #888;
 height: 100%; 
 border-top: 1px solid #CCCCCC;
 padding: 2px 0px 5px 5px;
 display: block;
 line-height: 22px;
} 
.pagination{
 float: right;
 margin-right: 10px;
}
.pagination a{
 color: #888;
}
.pagination a:hover{
 color: #4D4D4D;
}
.pagination a.currentPagination{
 color: #4D4D4D;
 font-weight: bold;
}
.pagination a:focus {
    outline: dotted 1px #000;
}
.controlPagination{
 position:relative;
 width:42px;
 height:22px;
 overflow:hidden;
 margin:0!important;
 padding:0!important;
 float: right;
}
.controlPagination a{
 position:absolute;
 top:0;
 left:0;
 line-height:25px;
 outline:none;
 overflow:hidden;
 border:none;
}
.controlPagination a.prevPagination , 
.controlPagination a.noPrevPagination, 
.controlPagination a.nextPagination, 
.controlPagination a.noNextPagination {
 background-image:url($xwiki.getSkinFile("navigation.png"));
 width: 21px;
 height: 22px;
}
.controlPagination a.prevPagination {
 background-position:left top;
}
.controlPagination a.noPrevPagination{
 background-position:left bottom;
}
.controlPagination a.nextPagination {
 background-position:right top;
 left: 21px;
}
.controlPagination a.noNextPagination {
 background-position:right bottom;
 left: 21px;
}

HTML Code

<div class="paginationFooter">
 <div class="paginationFilter">
  <span class="controlPagination">
   <a href="#" title="$msg.get('xe.pagination.page.prev.title')" class="noPrevPagination"></a>
   <a href="#" title="$msg.get('xe.pagination.page.next.title')" class="noNextPagination"></a>
  </span>
  <span class="pagination">
   $msg.get("xe.pagination.page")
   <a href="" title="$msg.get('xe.pagination.page.title',['1'])">1</a> 
   <a href="" class="currentPagination" title="$msg.get('xe.pagination.page.title',['2'])">2</a> 
   <a href="" title="$msg.get('xe.pagination.page.title',['3'])">3</a> 
   <a href="" title="$msg.get('xe.pagination.page.title',['4'])">4</a> 
   <a href="" title="$msg.get('xe.pagination.page.title',['5'])">5</a> 
   <a href="" title="$msg.get('xe.pagination.page.title',['6'])">6</a> 
   <a href="" title="$msg.get('xe.pagination.page.title',['7'])">7</a> 
   <a href="" title="$msg.get('xe.pagination.page.title',['8'])">8</a> 
   <a href="" title="$msg.get('xe.pagination.page.title',['9'])">9</a>
  </span>
 </div>
</div>

"dependencies"> Dependencies ==

Icons

navigation.png

Translations

Sort Translations

xe.search.filters.sort=Sort:

xe.search.filters.relevance=Relevance

xe.search.filters.relevance.title=Sort by Relevance

xe.search.filters.date=Date

xe.search.filters.date.title=Sort by Date

xe.search.filters.rating=Rating

xe.search.filters.rating.title=Sort by Rating

xe.search.filters.popularity=Popularity

xe.search.filters.popularity.title=Sort by Popularity

Navigation Translations

xe.pagination.results=Results

xe.pagination.results.of=out of

xe.pagination.page=Page

xe.pagination.page.title=Page {0}

xe.pagination.page.prev.title=Previous Page

xe.pagination.page.next.title=Next Page