Skip to Content

Wiki source code of Pagination

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