Skip to Content

Pagination

Version 21.1 by Oana Florea on 2011/01/28
Warning: For security reasons, the document is displayed in restricted mode as it is not the current version. There may be differences and errors due to this.

Pagination

Information

This was committed in 1.9RC1. See http://jira.xwiki.org/jira/browse/XWIKI-3880 for details.

Example

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

Upper navigation

Example-UpperNavigation.png

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>

Failed to execute the [velocity] macro. Cause: [The execution of the [velocity] script macro is not allowed in [xwiki:Documentation.DevGuide.FrontendResources.Pagination.WebHome]. Check the rights of its last author or the parameters if it's rendered from another script.]. Click on this message for details.

About

About

Support

Platform

User Guide

Admin Guide

Developer Guide

Projects

XWiki

Extensions

Other

Contribute

Status

Practices

Under the Hood

Get Involved

Get Connected