Skip to Content

Wiki source code of Pagination

Version 17.12 by Ecaterina Moraru (Valica) on 2009/04/10
Show last authors
1 1 Pagination
2
3 * [Upper Navigation > http://platform.xwiki.org/xwiki/bin/view/DevGuide/Pagination#upperNav]
4 * [Bottom Navigation > http://platform.xwiki.org/xwiki/bin/view/DevGuide/Pagination#bottomNav]
5 * [Dependencies > http://platform.xwiki.org/xwiki/bin/view/DevGuide/Pagination#dependencies]
6
7 1.1 Live example
8
9 See [http://incubator.myxwiki.org/xwiki/bin/view/Main/ListWebSearch]
10
11 1.1 <span id="upperNav">Upper navigation</span>
12
13 {image:Example-UpperNavigation.png|width=950}
14
15 1.1.1 CSS
16
17 Filters CSS:
18 {code}
19 .searchFilters{
20 clear: both;
21 font-size: 90%;
22 }
23 #sortFilter{
24 color: #888;
25 padding: 5px;
26 line-height: 16px;
27 }
28 #sortFilter a.sortType{
29 color: #888;
30 }
31 #sortFilter a.sortType:hover{
32 color: #4D4D4D;
33 }
34 #sortFilter a#currentSort{
35 color: #4D4D4D;
36 font-weight: bold;
37 }
38 #sortFilter a.sortType:focus,
39 #sortFilter a#currentSort:focus {
40 outline: dotted 1px #000;
41 }
42 {code}
43
44 Pagination with number of result pages displayed:
45 {code}
46 .paginationFilter {
47 color: #888;
48 height: 100%;
49 border-top: 1px solid #CCCCCC;
50 padding: 2px 0px 5px 5px;
51 display: block;
52 line-height: 22px;
53 }
54 .resultsNo{
55 float: left;
56 }
57 .resultsNo .currentResultsNo, .resultsNo .totalResultsNo{
58 color: #888;
59 }
60 .pagination{
61 float: right;
62 margin-right: 10px;
63 }
64 .pagination a{
65 color: #888;
66 }
67 .pagination a:hover{
68 color: #4D4D4D;
69 }
70 .pagination a.currentPagination{
71 color: #4D4D4D;
72 font-weight: bold;
73 }
74 .pagination a:focus {
75 outline: dotted 1px #000;
76 }
77 .controlPagination{
78 position:relative;
79 width:42px;
80 height:22px;
81 overflow:hidden;
82 margin:0!important;
83 padding:0!important;
84 float: right;
85 }
86 .controlPagination a{
87 position:absolute;
88 top:0;
89 left:0;
90 line-height:25px;
91 outline:none;
92 overflow:hidden;
93 border:none;
94 }
95 .controlPagination a.prevPagination ,
96 .controlPagination a.noPrevPagination,
97 .controlPagination a.nextPagination,
98 .controlPagination a.noNextPagination {
99 background-image:url($xwiki.getSkinFile("navigation.png"));
100 width: 21px;
101 height: 22px;
102 }
103 .controlPagination a.prevPagination {
104 background-position:left top;
105 }
106 .controlPagination a.noPrevPagination{
107 background-position:left bottom;
108 }
109 .controlPagination a.nextPagination {
110 background-position:right top;
111 left: 21px;
112 }
113 .controlPagination a.noNextPagination {
114 background-position:right bottom;
115 left: 21px;
116 }
117 {code}
118
119 1.1.1 HTML Code
120
121 {code}
122 <div class="searchFilters">
123
124 <div id="sortFilter">
125 $msg.get("xe.search.filters.sort")
126 <a href="" id="currentSort" title="$msg.get('xe.search.filters.relevance.title')">$msg.get("xe.search.filters.relevance")</a>
127 <a href="" class="sortType" title="$msg.get('xe.search.filters.date.title')">$msg.get("xe.search.filters.date")</a>
128 <a href="" class="sortType" title="$msg.get('xe.search.filters.rating.title')">$msg.get("xe.search.filters.rating")</a>
129 <a href="" class="sortType" title="$msg.get('xe.search.filters.popularity.title')">$msg.get("xe.search.filters.popularity")</a>
130 </div>
131
132 <div class="paginationFilter">
133
134 <span class="resultsNo">$msg.get("xe.search.filters.results") <span class="currentResultsNo">6-30</span> $msg.get("xe.search.filters.results.of") <span class="totalResultsNo">50</span></span>
135
136 <span class="controlPagination">
137 <a href="#" title="$msg.get('xe.search.filters.page.prev.title')" class="prevPagination"></a>
138 <a href="#" title="$msg.get('xe.search.filters.page.next.title')" class="nextPagination"></a>
139 </span>
140 <span class="pagination">$msg.get("xe.search.filters.page")
141 <a href="" title="$msg.get('xe.search.filters.page.title',['1'])">1</a>
142 <a href="" class="currentPagination" title="$msg.get('xe.search.filters.page.title',['2'])">2</a>
143 <a href="" title="$msg.get('xe.search.filters.page.title',['3'])">3</a>
144 <a href="" title="$msg.get('xe.search.filters.page.title',['4'])">4</a>
145 <a href="" title="$msg.get('xe.search.filters.page.title',['5'])">5</a>
146 <a href="" title="$msg.get('xe.search.filters.page.title',['6'])">6</a>
147 <a href="" title="$msg.get('xe.search.filters.page.title',['7'])">7</a>
148 <a href="" title="$msg.get('xe.search.filters.page.title',['8'])">8</a>
149 <a href="" title="$msg.get('xe.search.filters.page.title',['9'])">9</a>
150 </span>
151 </div>
152 </div>
153 {code}
154
155 1.1 <span id="bottomNav"> Bottom Navigation</span>
156
157 {image:Example-BottomNavigation.png|width=950}
158
159 This is a lighter version of the Upper Navigation, keeping only the pagination controls.
160
161 1.1.1 CSS
162
163 Container:
164 {code}
165 .paginationFooter{
166 display: block;
167 clear: both;
168 text-align: right;
169 font-size: 90%;
170 }
171 {code}
172
173 Same as in Upper navigation (don't apply if both navigations are present):
174 {code}
175 .paginationFilter {
176 color: #888;
177 height: 100%;
178 border-top: 1px solid #CCCCCC;
179 padding: 2px 0px 5px 5px;
180 display: block;
181 line-height: 22px;
182 }
183 .pagination{
184 float: right;
185 margin-right: 10px;
186 }
187 .pagination a{
188 color: #888;
189 }
190 .pagination a:hover{
191 color: #4D4D4D;
192 }
193 .pagination a.currentPagination{
194 color: #4D4D4D;
195 font-weight: bold;
196 }
197 .pagination a:focus {
198 outline: dotted 1px #000;
199 }
200 .controlPagination{
201 position:relative;
202 width:42px;
203 height:22px;
204 overflow:hidden;
205 margin:0!important;
206 padding:0!important;
207 float: right;
208 }
209 .controlPagination a{
210 position:absolute;
211 top:0;
212 left:0;
213 line-height:25px;
214 outline:none;
215 overflow:hidden;
216 border:none;
217 }
218 .controlPagination a.prevPagination ,
219 .controlPagination a.noPrevPagination,
220 .controlPagination a.nextPagination,
221 .controlPagination a.noNextPagination {
222 background-image:url($xwiki.getSkinFile("navigation.png"));
223 width: 21px;
224 height: 22px;
225 }
226 .controlPagination a.prevPagination {
227 background-position:left top;
228 }
229 .controlPagination a.noPrevPagination{
230 background-position:left bottom;
231 }
232 .controlPagination a.nextPagination {
233 background-position:right top;
234 left: 21px;
235 }
236 .controlPagination a.noNextPagination {
237 background-position:right bottom;
238 left: 21px;
239 }
240 {code}
241
242 1.1.1 HTML Code
243
244 {code}
245 <div class="paginationFooter">
246 <div class="paginationFilter">
247 <span class="controlPagination">
248 <a href="#" title="$msg.get('xe.search.filters.page.prev.title')" class="noPrevPagination"></a>
249 <a href="#" title="$msg.get('xe.search.filters.page.next.title')" class="noNextPagination"></a>
250 </span>
251 <span class="pagination">
252 $msg.get("xe.search.filters.page")
253 <a href="" title="$msg.get('xe.search.filters.page.title',['1'])">1</a>
254 <a href="" class="currentPagination" title="$msg.get('xe.search.filters.page.title',['2'])">2</a>
255 <a href="" title="$msg.get('xe.search.filters.page.title',['3'])">3</a>
256 <a href="" title="$msg.get('xe.search.filters.page.title',['4'])">4</a>
257 <a href="" title="$msg.get('xe.search.filters.page.title',['5'])">5</a>
258 <a href="" title="$msg.get('xe.search.filters.page.title',['6'])">6</a>
259 <a href="" title="$msg.get('xe.search.filters.page.title',['7'])">7</a>
260 <a href="" title="$msg.get('xe.search.filters.page.title',['8'])">8</a>
261 <a href="" title="$msg.get('xe.search.filters.page.title',['9'])">9</a>
262 </span>
263 </div>
264 </div>
265 {code}
266
267 1.1 <span id="dependencies"> Dependencies</span>
268
269 1.1.1 Icons
270
271 navigation.png
272
273 {image:navigation.png}
274
275 1.1.1 Translations
276
277 1.1.1.1 Sort Translations
278
279 xe.search.filters.sort=Sort:
280
281 xe.search.filters.relevance=Relevance
282
283 xe.search.filters.relevance.title=Sort by Relevance
284
285 xe.search.filters.date=Date
286
287 xe.search.filters.date.title=Sort by Date
288
289 xe.search.filters.rating=Rating
290
291 xe.search.filters.rating.title=Sort by Rating
292
293 xe.search.filters.popularity=Popularity
294
295 xe.search.filters.popularity.title=Sort by Popularity
296
297 1.1.1.1 Navigation Translations
298
299 xe.search.filters.results=Results
300
301 xe.search.filters.results.of=out of
302
303 xe.search.filters.page=Page
304
305 xe.search.filters.page.title=Page {0}
306
307 xe.search.filters.page.prev.title=Previous Page
308
309 xe.search.filters.page.next.title=Next Page

About

About

Support

Platform

User Guide

Admin Guide

Developer Guide

Projects

XWiki

Extensions

Other

Contribute

Status

Practices

Under the Hood

Get Involved

Get Connected