Pagination
1 Pagination
#info("This was committed in 1.9RC1. See http://jira.xwiki.org/jira/browse/XWIKI-3880 for details.")
#toc('2' '2' '')
1.1 Example
See [http://incubator.myxwiki.org/xwiki/bin/view/Main/ListWebSearch]
1.1 Upper navigation
{
1.1.1 CSS
Filters CSS:
{code}
.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;
}
{code}
Pagination with number of result pages displayed:
{code}
.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-
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;
}
{code}
1.1.1 HTML Code
{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>
{code}
1.1 <span id="bottomNav"> Bottom Navigation</span>
{
This is a lighter version of the Upper Navigation, keeping only the pagination controls.
1.1.1 CSS
Container:
{code}
.paginationFooter{
display: block;
clear: both;
text-align: right;
font-size: 90%;
}
{code}
Same as in Upper navigation (don't apply if both navigations are present):
{code}
.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-
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;
}
{code}
1.1.1 HTML Code
{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>
{code}
1.1 <span id="dependencies"> Dependencies</span>
1.1.1 Icons
navigation.png
{
1.1.1 Translations
1.1.1.1 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
1.1.1.1 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
1.1 Velocity Macro
{code:none}
#pagination($parameters)
{code}
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:
<dl>
<dt>url</dt>
<dd>The base url of the document displaying the collection.</dd>
<dd>Default: \$doc.getURL('view')</dd>
<dt>totalItems</dt>
<dd>The total number number of items in the collection.</dd>
<dd>Default: none, this parameter is mandatory.</dd>
<dt>defaultItemsPerPage</dt>
<dd>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.</dd>
<dd>Default: 20</dd>
<dt>position</dt>
<dd>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.</dd>
<dd>Default: top</dd>
<dt>itemParamName</dt>
<dd>The name of the request parameter for the index of the first displayed item.</dd>
<dd>Default: firstIndex</dd>
<dt>itemsPerPageParamName</dt>
<dd>The name of the request parameter for the number of items displayed on a page.</dd>
<dd>Default: perPage</dd>
</dl>
Usage example:
{code:none}
#set($paginationParameters = {
'url' : $doc.getURL('view', "text=${query}"),
'totalItems' : $searchresults.getHitcount(),
'defaultItemsPerPage' : $defaultItemsPerPage,
'position': 'top'
})
#pagination($paginationParameters)
{code}
1.1.1 Example
The pagination macro can be used for example to display the latest modifications of the current user:
{code:none}
#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
{code}
#if(!$isGuest)
#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
#end
