Skip to Content

Pagination

Version 28.1 by Thomas Mortagne on 2017/03/24
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.
Contents
Information

This was committed in 1.9RC1. See this Jira issue for details.

Example

See 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>

Bottom Navigation

Example-BottomNavigation.png

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

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

Velocity Macro

#pagination($parameters)

The macro is responsible for displaying browsing links, and does not involve the actual display of the browsed items.

It accepts a single argument, which in turn is a map of parameters:

url
The base url of the document displaying the collection.
Default: 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.
totalItems
The total number number of items in the collection.
Default: none, this parameter is mandatory.
defaultItemsPerPage
The number of items per page. This value is overwritten by the request parameter "perPage", if it exists and has a valid positive integer value.
Default: 20
position
The placement of the pagination widget. Supported values: "top", "bottom". The bottom widget only displays pages, while the top widget also provides a information about the item range on the current page.
Default: top
itemParamName
The name of the request parameter for the index of the first displayed item.
Default: firstIndex
itemsPerPageParamName
The name of the request parameter for the number of items displayed on a page.
Default: perPage

Usage example:

#set($paginationParameters = {
  'url' : $doc.getURL('view', "text=${query}"),
  'totalItems' : $searchresults.getHitcount(),
  'defaultItemsPerPage' : $defaultItemsPerPage,
  'position': 'top'
})
#pagination($paginationParameters)

Example

The pagination macro can be used for example to display the latest modifications of the current user:


#set($ok = $xwiki.jsfx.use("uicomponents/search/search.js", true))
  #set($ok = $xwiki.ssfx.use("uicomponents/search/search.css", true))
  ##
  ##  set display parameters for the list
  ##
  #set($defaultItemsPerPage = 10)
  #set($orderClause = "order by doc.date desc")
  #set($whereClause = "where 1=1 and doc.author='$context.user'")
  #set($results_url = $doc.getURL('view'))
  #set($totalItems = $xwiki.countDocuments($whereClause))
  #if($totalItems > 0)
    ## -----------------
    ## Pagination (top)
    ## -----------------
    #set($paginationParameters = {'url' : $results_url, 'totalItems' : $totalItems, 'defaultItemsPerPage' : $defaultItemsPerPage, 'position': 'top'})
    #pagination($paginationParameters)
    ## -----------------
    ## Display results
    ## -----------------
    #set($firstIndex = "$!{paginationParameters.firstItem}")
    #if($firstIndex == '')
      #set($firstIndex = "$!request.getParameter('firstIndex')")
      #if($firstIndex == '')
        #set($firstIndex = '0')
      #end
    #end
    #set($firstIndex = $util.parseInt($firstIndex))
    #set($results = $xwiki.searchDocuments("$whereClause $orderClause", $defaultItemsPerPage, $firstIndex))
    #set ($list = $results)
    #set ($isScored = false)
    #includeInContext("XWiki.Results")
    ## -----------------
    ## Pagination (bottom)
    ## -----------------
    #set($paginationParameters.position = 'bottom')
    #pagination($paginationParameters)
  #end

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