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