Wiki source code of Pagination
Last modified by Vincent Massol on 2017/09/04 17:00
Hide last authors
| author | version | line-number | content |
|---|---|---|---|
 |
26.13 | 1 | {{box cssClass="floatinginfobox" title="**Contents**"}} |
| 2 | {{toc/}} | ||
| 3 | {{/box}} | ||
 |
1.1 | 4 | |
| |
26.1 | 5 | {{info}} |
 |
28.1 | 6 | This was committed in 1.9RC1. See [[this Jira issue>>https://jira.xwiki.org/browse/XWIKI-3880]] for details. |
| |
26.1 | 7 | {{/info}} |
| |
1.1 | 8 | |
| |
26.13 | 9 | = Example = |
| |
2.1 | 10 | |
| |
26.13 | 11 | See [[ListWebSearch>>http://incubator.myxwiki.org/xwiki/bin/view/Main/ListWebSearch]] |
| |
2.1 | 12 | |
| |
26.1 | 13 | == Upper navigation == |
 |
17.2 | 14 | |
| |
26.1 | 15 | [[image:Example-UpperNavigation.png||width="950"]] |
| |
3.1 | 16 | |
| |
26.13 | 17 | == CSS == |
| |
26.1 | 18 | |
| |
7.1 | 19 | Filters CSS: |
| |
26.1 | 20 | |
| 21 | {{code}} | ||
| |
4.1 | 22 | .searchFilters{ |
| 23 | clear: both; | ||
| 24 | font-size: 90%; | ||
| 25 | } | ||
| 26 | #sortFilter{ | ||
| |
17.10 | 27 | color: #888; |
| |
4.1 | 28 | padding: 5px; |
| 29 | line-height: 16px; | ||
| 30 | } | ||
| 31 | #sortFilter a.sortType{ | ||
| |
17.10 | 32 | color: #888; |
| |
4.1 | 33 | } |
| 34 | #sortFilter a.sortType:hover{ | ||
| 35 | color: #4D4D4D; | ||
| 36 | } | ||
| 37 | #sortFilter a#currentSort{ | ||
| 38 | color: #4D4D4D; | ||
| 39 | font-weight: bold; | ||
| 40 | } | ||
| |
5.1 | 41 | #sortFilter a.sortType:focus, |
| 42 | #sortFilter a#currentSort:focus { | ||
| |
4.1 | 43 | outline: dotted 1px #000; |
| 44 | } | ||
| |
26.1 | 45 | {{/code}} |
| |
1.1 | 46 | |
| |
7.1 | 47 | Pagination with number of result pages displayed: |
| |
26.1 | 48 | |
| 49 | {{code}} | ||
| |
4.1 | 50 | .paginationFilter { |
| |
17.10 | 51 | color: #888; |
| |
4.1 | 52 | height: 100%; |
| 53 | border-top: 1px solid #CCCCCC; | ||
| 54 | padding: 2px 0px 5px 5px; | ||
| 55 | display: block; | ||
| 56 | line-height: 22px; | ||
| 57 | } | ||
| 58 | .resultsNo{ | ||
| 59 | float: left; | ||
| 60 | } | ||
| 61 | .resultsNo .currentResultsNo, .resultsNo .totalResultsNo{ | ||
| |
17.10 | 62 | color: #888; |
| |
4.1 | 63 | } |
| 64 | .pagination{ | ||
| 65 | float: right; | ||
| 66 | margin-right: 10px; | ||
| 67 | } | ||
| 68 | .pagination a{ | ||
| |
17.10 | 69 | color: #888; |
| |
4.1 | 70 | } |
| 71 | .pagination a:hover{ | ||
| 72 | color: #4D4D4D; | ||
| 73 | } | ||
| 74 | .pagination a.currentPagination{ | ||
| 75 | color: #4D4D4D; | ||
| 76 | font-weight: bold; | ||
| 77 | } | ||
| 78 | .pagination a:focus { | ||
| 79 | outline: dotted 1px #000; | ||
| 80 | } | ||
| 81 | .controlPagination{ | ||
| 82 | position:relative; | ||
| 83 | width:42px; | ||
| 84 | height:22px; | ||
| 85 | overflow:hidden; | ||
| 86 | margin:0!important; | ||
| 87 | padding:0!important; | ||
| 88 | float: right; | ||
| 89 | } | ||
| 90 | .controlPagination a{ | ||
| 91 | position:absolute; | ||
| 92 | top:0; | ||
| 93 | left:0; | ||
| 94 | line-height:25px; | ||
| 95 | outline:none; | ||
| 96 | overflow:hidden; | ||
| 97 | border:none; | ||
| 98 | } | ||
| |
17.12 | 99 | .controlPagination a.prevPagination , |
| 100 | .controlPagination a.noPrevPagination, | ||
| 101 | .controlPagination a.nextPagination, | ||
| 102 | .controlPagination a.noNextPagination { | ||
| |
4.1 | 103 | background-image:url($xwiki.getSkinFile("navigation.png")); |
| 104 | width: 21px; | ||
| 105 | height: 22px; | ||
| 106 | } | ||
| |
17.12 | 107 | .controlPagination a.prevPagination { |
| 108 | background-position:left top; | ||
| 109 | } | ||
| |
4.1 | 110 | .controlPagination a.noPrevPagination{ |
| 111 | background-position:left bottom; | ||
| 112 | } | ||
| 113 | .controlPagination a.nextPagination { | ||
| 114 | background-position:right top; | ||
| 115 | left: 21px; | ||
| 116 | } | ||
| 117 | .controlPagination a.noNextPagination { | ||
| 118 | background-position:right bottom; | ||
| 119 | left: 21px; | ||
| |
17.12 | 120 | } |
| |
26.1 | 121 | {{/code}} |
| |
4.1 | 122 | |
| |
26.13 | 123 | == HTML Code == |
| |
1.1 | 124 | |
| |
26.1 | 125 | {{code}} |
| |
3.1 | 126 | <div class="searchFilters"> |
| |
4.1 | 127 | |
| |
3.1 | 128 | <div id="sortFilter"> |
| 129 | $msg.get("xe.search.filters.sort") | ||
| 130 | <a href="" id="currentSort" title="$msg.get('xe.search.filters.relevance.title')">$msg.get("xe.search.filters.relevance")</a> | ||
| 131 | <a href="" class="sortType" title="$msg.get('xe.search.filters.date.title')">$msg.get("xe.search.filters.date")</a> | ||
| 132 | <a href="" class="sortType" title="$msg.get('xe.search.filters.rating.title')">$msg.get("xe.search.filters.rating")</a> | ||
| 133 | <a href="" class="sortType" title="$msg.get('xe.search.filters.popularity.title')">$msg.get("xe.search.filters.popularity")</a> | ||
| 134 | </div> | ||
| 135 | |||
| 136 | <div class="paginationFilter"> | ||
| |
4.1 | 137 | |
| |
18.1 | 138 | <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> |
| |
4.1 | 139 | |
| |
3.1 | 140 | <span class="controlPagination"> |
| |
18.1 | 141 | <a href="#" title="$msg.get('xe.pagination.page.prev.title')" class="prevPagination"></a> |
| 142 | <a href="#" title="$msg.get('xe.pagination.page.next.title')" class="nextPagination"></a> | ||
| |
3.1 | 143 | </span> |
| |
18.1 | 144 | <span class="pagination">$msg.get("xe.pagination.page") |
| 145 | <a href="" title="$msg.get('xe.pagination.page.title',['1'])">1</a> | ||
| 146 | <a href="" class="currentPagination" title="$msg.get('xe.pagination.page.title',['2'])">2</a> | ||
| 147 | <a href="" title="$msg.get('xe.pagination.page.title',['3'])">3</a> | ||
| 148 | <a href="" title="$msg.get('xe.pagination.page.title',['4'])">4</a> | ||
| 149 | <a href="" title="$msg.get('xe.pagination.page.title',['5'])">5</a> | ||
| 150 | <a href="" title="$msg.get('xe.pagination.page.title',['6'])">6</a> | ||
| 151 | <a href="" title="$msg.get('xe.pagination.page.title',['7'])">7</a> | ||
| 152 | <a href="" title="$msg.get('xe.pagination.page.title',['8'])">8</a> | ||
| 153 | <a href="" title="$msg.get('xe.pagination.page.title',['9'])">9</a> | ||
| |
3.1 | 154 | </span> |
| 155 | </div> | ||
| 156 | </div> | ||
| |
26.1 | 157 | {{/code}} |
| |
3.1 | 158 | |
| |
26.13 | 159 | = Bottom Navigation = |
| |
3.1 | 160 | |
| |
26.1 | 161 | [[image:Example-BottomNavigation.png||width="950"]] |
| |
26.13 | 162 | |
| |
7.1 | 163 | This is a lighter version of the Upper Navigation, keeping only the pagination controls. |
| 164 | |||
| |
26.13 | 165 | == CSS == |
| |
3.1 | 166 | |
| |
7.1 | 167 | Container: |
| |
26.1 | 168 | |
| 169 | {{code}} | ||
| |
4.1 | 170 | .paginationFooter{ |
| 171 | display: block; | ||
| 172 | clear: both; | ||
| 173 | text-align: right; | ||
| 174 | font-size: 90%; | ||
| 175 | } | ||
| |
26.1 | 176 | {{/code}} |
| |
3.1 | 177 | |
| |
17.12 | 178 | Same as in Upper navigation (don't apply if both navigations are present): |
| |
26.1 | 179 | |
| 180 | {{code}} | ||
| |
4.1 | 181 | .paginationFilter { |
| |
17.10 | 182 | color: #888; |
| |
4.1 | 183 | height: 100%; |
| 184 | border-top: 1px solid #CCCCCC; | ||
| 185 | padding: 2px 0px 5px 5px; | ||
| 186 | display: block; | ||
| 187 | line-height: 22px; | ||
| 188 | } | ||
| 189 | .pagination{ | ||
| 190 | float: right; | ||
| 191 | margin-right: 10px; | ||
| 192 | } | ||
| 193 | .pagination a{ | ||
| |
17.10 | 194 | color: #888; |
| |
4.1 | 195 | } |
| 196 | .pagination a:hover{ | ||
| 197 | color: #4D4D4D; | ||
| 198 | } | ||
| 199 | .pagination a.currentPagination{ | ||
| 200 | color: #4D4D4D; | ||
| 201 | font-weight: bold; | ||
| 202 | } | ||
| 203 | .pagination a:focus { | ||
| 204 | outline: dotted 1px #000; | ||
| 205 | } | ||
| 206 | .controlPagination{ | ||
| 207 | position:relative; | ||
| 208 | width:42px; | ||
| 209 | height:22px; | ||
| 210 | overflow:hidden; | ||
| 211 | margin:0!important; | ||
| 212 | padding:0!important; | ||
| 213 | float: right; | ||
| 214 | } | ||
| 215 | .controlPagination a{ | ||
| 216 | position:absolute; | ||
| 217 | top:0; | ||
| 218 | left:0; | ||
| 219 | line-height:25px; | ||
| 220 | outline:none; | ||
| 221 | overflow:hidden; | ||
| 222 | border:none; | ||
| 223 | } | ||
| |
17.12 | 224 | .controlPagination a.prevPagination , |
| 225 | .controlPagination a.noPrevPagination, | ||
| 226 | .controlPagination a.nextPagination, | ||
| 227 | .controlPagination a.noNextPagination { | ||
| |
4.1 | 228 | background-image:url($xwiki.getSkinFile("navigation.png")); |
| 229 | width: 21px; | ||
| 230 | height: 22px; | ||
| 231 | } | ||
| |
17.12 | 232 | .controlPagination a.prevPagination { |
| 233 | background-position:left top; | ||
| 234 | } | ||
| |
4.1 | 235 | .controlPagination a.noPrevPagination{ |
| 236 | background-position:left bottom; | ||
| 237 | } | ||
| 238 | .controlPagination a.nextPagination { | ||
| 239 | background-position:right top; | ||
| 240 | left: 21px; | ||
| 241 | } | ||
| 242 | .controlPagination a.noNextPagination { | ||
| 243 | background-position:right bottom; | ||
| 244 | left: 21px; | ||
| |
17.12 | 245 | } |
| |
26.1 | 246 | {{/code}} |
| |
4.1 | 247 | |
| |
26.13 | 248 | == HTML Code == |
| |
3.1 | 249 | |
| |
26.1 | 250 | {{code}} |
| |
4.1 | 251 | <div class="paginationFooter"> |
| 252 | <div class="paginationFilter"> | ||
| 253 | <span class="controlPagination"> | ||
| |
18.1 | 254 | <a href="#" title="$msg.get('xe.pagination.page.prev.title')" class="noPrevPagination"></a> |
| 255 | <a href="#" title="$msg.get('xe.pagination.page.next.title')" class="noNextPagination"></a> | ||
| |
4.1 | 256 | </span> |
| 257 | <span class="pagination"> | ||
| |
18.1 | 258 | $msg.get("xe.pagination.page") |
| 259 | <a href="" title="$msg.get('xe.pagination.page.title',['1'])">1</a> | ||
| 260 | <a href="" class="currentPagination" title="$msg.get('xe.pagination.page.title',['2'])">2</a> | ||
| 261 | <a href="" title="$msg.get('xe.pagination.page.title',['3'])">3</a> | ||
| 262 | <a href="" title="$msg.get('xe.pagination.page.title',['4'])">4</a> | ||
| 263 | <a href="" title="$msg.get('xe.pagination.page.title',['5'])">5</a> | ||
| 264 | <a href="" title="$msg.get('xe.pagination.page.title',['6'])">6</a> | ||
| 265 | <a href="" title="$msg.get('xe.pagination.page.title',['7'])">7</a> | ||
| 266 | <a href="" title="$msg.get('xe.pagination.page.title',['8'])">8</a> | ||
| 267 | <a href="" title="$msg.get('xe.pagination.page.title',['9'])">9</a> | ||
| |
4.1 | 268 | </span> |
| 269 | </div> | ||
| 270 | </div> | ||
| |
26.1 | 271 | {{/code}} |
| |
1.1 | 272 | |
 |
29.1 | 273 | = Dependencies = |
| |
8.1 | 274 | |
| |
26.13 | 275 | == Icons == |
| |
8.1 | 276 | |
| |
26.1 | 277 | [[image:navigation.png]] |
| |
8.1 | 278 | |
| |
26.13 | 279 | == Translations == |
| |
17.4 | 280 | |
| |
26.13 | 281 | === Sort Translations === |
| |
8.1 | 282 | |
| |
26.6 | 283 | {{code}} |
| |
8.1 | 284 | xe.search.filters.sort=Sort: |
| 285 | xe.search.filters.relevance=Relevance | ||
| 286 | xe.search.filters.relevance.title=Sort by Relevance | ||
| 287 | xe.search.filters.date=Date | ||
| 288 | xe.search.filters.date.title=Sort by Date | ||
| 289 | xe.search.filters.rating=Rating | ||
| 290 | xe.search.filters.rating.title=Sort by Rating | ||
| 291 | xe.search.filters.popularity=Popularity | ||
| 292 | xe.search.filters.popularity.title=Sort by Popularity | ||
| |
26.6 | 293 | {{/code}} |
| |
8.1 | 294 | |
| |
26.13 | 295 | === Navigation Translations === |
| |
8.1 | 296 | |
| |
26.6 | 297 | {{code}} |
| |
18.1 | 298 | xe.pagination.results=Results |
| 299 | xe.pagination.results.of=out of | ||
| 300 | xe.pagination.page=Page | ||
| 301 | xe.pagination.page.title=Page {0} | ||
| 302 | xe.pagination.page.prev.title=Previous Page | ||
| 303 | xe.pagination.page.next.title=Next Page | ||
| |
26.6 | 304 | {{/code}} |
| |
8.1 | 305 | |
| |
26.13 | 306 | = Velocity Macro = |
 |
20.1 | 307 | |
| |
29.1 | 308 | {{code language="none"}} |
| 309 | #pagination($parameters) | ||
| 310 | {{/code}} | ||
| |
20.1 | 311 | |
| 312 | The macro is responsible for displaying browsing links, and does not involve the actual display of the browsed items. | ||
| |
26.13 | 313 | |
| |
20.1 | 314 | It accepts a single argument, which in turn is a map of parameters: |
| |
26.13 | 315 | |
| 316 | ; url | ||
| 317 | : The base url of the document displaying the collection. | ||
| 318 | : Default: {{velocity}}$doc.getURL('view'){{/velocity}} | ||
| 319 | ; totalItems | ||
| 320 | : The total number number of items in the collection. | ||
| 321 | : Default: none, this parameter is mandatory. | ||
| 322 | ; defaultItemsPerPage | ||
| 323 | : 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. | ||
| 324 | : Default: 20 | ||
| 325 | ; position | ||
| 326 | : 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. | ||
| 327 | : Default: top | ||
| 328 | ; itemParamName | ||
| 329 | : The name of the request parameter for the index of the first displayed item. | ||
| 330 | : Default: firstIndex | ||
| 331 | ; itemsPerPageParamName | ||
| 332 | : The name of the request parameter for the number of items displayed on a page. | ||
| 333 | : Default: perPage | ||
| 334 | |||
| |
26.1 | 335 | Usage example: |
| |
24.1 | 336 | |
| |
26.1 | 337 | {{code language="none"}} |
| |
20.1 | 338 | #set($paginationParameters = { |
| 339 | 'url' : $doc.getURL('view', "text=${query}"), | ||
| 340 | 'totalItems' : $searchresults.getHitcount(), | ||
| 341 | 'defaultItemsPerPage' : $defaultItemsPerPage, | ||
| 342 | 'position': 'top' | ||
| 343 | }) | ||
| 344 | #pagination($paginationParameters) | ||
| |
26.1 | 345 | {{/code}} |
 |
21.1 | 346 | |
| |
26.13 | 347 | == Example == |
| |
21.1 | 348 | |
| 349 | The pagination macro can be used for example to display the latest modifications of the current user: | ||
| 350 | |||
| |
26.7 | 351 | {{code}} |
| |
26.8 | 352 | |
| |
26.1 | 353 | #set($ok = $xwiki.jsfx.use("uicomponents/search/search.js", true)) |
| |
21.1 | 354 | #set($ok = $xwiki.ssfx.use("uicomponents/search/search.css", true)) |
| 355 | ## | ||
| 356 | ## set display parameters for the list | ||
| 357 | ## | ||
| 358 | #set($defaultItemsPerPage = 10) | ||
| |
22.1 | 359 | #set($orderClause = "order by doc.date desc") |
| 360 | #set($whereClause = "where 1=1 and doc.author='$context.user'") | ||
| |
21.1 | 361 | #set($results_url = $doc.getURL('view')) |
| |
22.1 | 362 | #set($totalItems = $xwiki.countDocuments($whereClause)) |
| 363 | #if($totalItems > 0) | ||
| |
21.1 | 364 | ## ----------------- |
| 365 | ## Pagination (top) | ||
| 366 | ## ----------------- | ||
| |
22.1 | 367 | #set($paginationParameters = {'url' : $results_url, 'totalItems' : $totalItems, 'defaultItemsPerPage' : $defaultItemsPerPage, 'position': 'top'}) |
| |
21.1 | 368 | #pagination($paginationParameters) |
| 369 | ## ----------------- | ||
| 370 | ## Display results | ||
| 371 | ## ----------------- | ||
| 372 | #set($firstIndex = "$!{paginationParameters.firstItem}") | ||
| 373 | #if($firstIndex == '') | ||
| 374 | #set($firstIndex = "$!request.getParameter('firstIndex')") | ||
| 375 | #if($firstIndex == '') | ||
| 376 | #set($firstIndex = '0') | ||
| 377 | #end | ||
| 378 | #end | ||
| 379 | #set($firstIndex = $util.parseInt($firstIndex)) | ||
| |
22.1 | 380 | #set($results = $xwiki.searchDocuments("$whereClause $orderClause", $defaultItemsPerPage, $firstIndex)) |
| |
21.1 | 381 | #set ($list = $results) |
| 382 | #set ($isScored = false) | ||
| 383 | #includeInContext("XWiki.Results") | ||
| 384 | ## ----------------- | ||
| 385 | ## Pagination (bottom) | ||
| 386 | ## ----------------- | ||
| 387 | #set($paginationParameters.position = 'bottom') | ||
| 388 | #pagination($paginationParameters) | ||
| 389 | #end | ||
| |
26.1 | 390 | {{/code}} |
| |
26.9 | 391 | |
| |
26.3 | 392 | {{velocity}} |
| |
21.1 | 393 | #if(!$isGuest) |
| |
22.1 | 394 | #set($ok = $xwiki.jsfx.use("uicomponents/search/search.js", true)) |
| 395 | #set($ok = $xwiki.ssfx.use("uicomponents/search/search.css", true)) | ||
| |
21.1 | 396 | ## |
| 397 | ## set display parameters for the list | ||
| 398 | ## | ||
| 399 | #set($defaultItemsPerPage = 10) | ||
| |
22.1 | 400 | #set($orderClause = "order by doc.date desc") |
| 401 | #set($whereClause = "where 1=1 and doc.author='$context.user'") | ||
| |
21.1 | 402 | #set($results_url = $doc.getURL('view')) |
| |
22.1 | 403 | #set($totalItems = $xwiki.countDocuments($whereClause)) |
| 404 | #if($totalItems > 0) | ||
| |
21.1 | 405 | ## ----------------- |
| 406 | ## Pagination (top) | ||
| 407 | ## ----------------- | ||
| |
22.1 | 408 | #set($paginationParameters = {'url' : $results_url, 'totalItems' : $totalItems, 'defaultItemsPerPage' : $defaultItemsPerPage, 'position': 'top'}) |
| |
26.12 | 409 | {{html wiki="true" clean="false"}} |
| 410 | #pagination($paginationParameters) | ||
| 411 | {{/html}} | ||
| |
21.1 | 412 | ## ----------------- |
| 413 | ## Display results | ||
| 414 | ## ----------------- | ||
| 415 | #set($firstIndex = "$!{paginationParameters.firstItem}") | ||
| 416 | #if($firstIndex == '') | ||
| 417 | #set($firstIndex = "$!request.getParameter('firstIndex')") | ||
| 418 | #if($firstIndex == '') | ||
| 419 | #set($firstIndex = '0') | ||
| 420 | #end | ||
| 421 | #end | ||
| 422 | #set($firstIndex = $util.parseInt($firstIndex)) | ||
| |
22.1 | 423 | #set($results = $xwiki.searchDocuments("$whereClause $orderClause", $defaultItemsPerPage, $firstIndex)) |
| |
21.1 | 424 | #set ($list = $results) |
| 425 | #set ($isScored = false) | ||
| |
26.1 | 426 | {{include document="XWiki.Results"/}} |
| |
21.1 | 427 | ## ----------------- |
| 428 | ## Pagination (bottom) | ||
| 429 | ## ----------------- | ||
| 430 | #set($paginationParameters.position = 'bottom') | ||
| |
26.12 | 431 | {{html wiki="true" clean="false"}} |
| 432 | #pagination($paginationParameters) | ||
| 433 | {{/html}} | ||
| |
21.1 | 434 | #end |
| 435 | #end | ||
| |
26.3 | 436 | {{/velocity}} |
