Skip to Content

Wiki source code of Pagination

Version 12.1 by Ecaterina Moraru (Valica) on 2009/03/25
Show last authors
1 1 Pagination
2
3 Insert description here.
4
5 1.1 Live example
6
7 See [http://incubator.myxwiki.org/xwiki/bin/view/Main/ListWebSearch]
8
9 1.1 <span id="1">Upper navigation</span>
10
11 1.1.1 CSS
12
13 Filters CSS:
14 {code}
15 .searchFilters{
16 clear: both;
17 font-size: 90%;
18 }
19 #sortFilter{
20 color: #aaa;
21 padding: 5px;
22 line-height: 16px;
23 }
24 #sortFilter a.sortType{
25 color: #aaa;
26 }
27 #sortFilter a.sortType:hover{
28 color: #4D4D4D;
29 }
30 #sortFilter a#currentSort{
31 color: #4D4D4D;
32 font-weight: bold;
33 }
34 #sortFilter a.sortType:focus,
35 #sortFilter a#currentSort:focus {
36 outline: dotted 1px #000;
37 }
38 {code}
39
40 Pagination with number of result pages displayed:
41 {code}
42 .paginationFilter {
43 color: #aaa;
44 height: 100%;
45 border-top: 1px solid #CCCCCC;
46 padding: 2px 0px 5px 5px;
47 display: block;
48 line-height: 22px;
49 }
50 .resultsNo{
51 float: left;
52 }
53 .resultsNo .currentResultsNo, .resultsNo .totalResultsNo{
54 color: #aaa;
55 }
56 .pagination{
57 float: right;
58 margin-right: 10px;
59 }
60 .pagination a{
61 color: #aaa;
62 }
63 .pagination a:hover{
64 color: #4D4D4D;
65 }
66 .pagination a.currentPagination{
67 color: #4D4D4D;
68 font-weight: bold;
69 }
70 .pagination a:focus {
71 outline: dotted 1px #000;
72 }
73 .controlPagination{
74 position:relative;
75 width:42px;
76 height:22px;
77 overflow:hidden;
78 margin:0!important;
79 padding:0!important;
80 float: right;
81 }
82 .controlPagination a{
83 position:absolute;
84 top:0;
85 left:0;
86 text-indent:-1000em;
87 line-height:25px;
88 outline:none;
89 overflow:hidden;
90 border:none;
91 }
92 .controlPagination a.prevPagination {
93 background-position:left top;
94 background-image:url($xwiki.getSkinFile("navigation.png"));
95 width: 21px;
96 height: 22px;
97 }
98 .controlPagination a.noPrevPagination{
99 background-position:left bottom;
100 background-image:url($xwiki.getSkinFile("navigation.png"));
101 width: 21px;
102 height: 22px;
103 }
104 .controlPagination a.nextPagination {
105 background-position:right top;
106 background-image:url($xwiki.getSkinFile("navigation.png"));
107 width: 21px;
108 height: 22px;
109 left: 21px;
110 }
111 .controlPagination a.noNextPagination {
112 background-position:right bottom;
113 background-image:url($xwiki.getSkinFile("navigation.png"));
114 width: 21px;
115 height: 22px;
116 left: 21px;
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 Bottom Navigation
156
157 This is a lighter version of the Upper Navigation, keeping only the pagination controls.
158
159 1.1.1 CSS
160
161 Container:
162 {code}
163 .paginationFooter{
164 display: block;
165 clear: both;
166 text-align: right;
167 font-size: 90%;
168 }
169 {code}
170
171 Same as in Upper navigation:
172 {code}
173 .paginationFilter {
174 color: #aaa;
175 height: 100%;
176 border-top: 1px solid #CCCCCC;
177 padding: 2px 0px 5px 5px;
178 display: block;
179 line-height: 22px;
180 }
181 .pagination{
182 float: right;
183 margin-right: 10px;
184 }
185 .pagination a{
186 color: #aaa;
187 }
188 .pagination a:hover{
189 color: #4D4D4D;
190 }
191 .pagination a.currentPagination{
192 color: #4D4D4D;
193 font-weight: bold;
194 }
195 .pagination a:focus {
196 outline: dotted 1px #000;
197 }
198 .controlPagination{
199 position:relative;
200 width:42px;
201 height:22px;
202 overflow:hidden;
203 margin:0!important;
204 padding:0!important;
205 float: right;
206 }
207 .controlPagination a{
208 position:absolute;
209 top:0;
210 left:0;
211 text-indent:-1000em;
212 line-height:25px;
213 outline:none;
214 overflow:hidden;
215 border:none;
216 }
217 .controlPagination a.prevPagination {
218 background-position:left top;
219 background-image:url($xwiki.getSkinFile("navigation.png"));
220 width: 21px;
221 height: 22px;
222 }
223 .controlPagination a.noPrevPagination{
224 background-position:left bottom;
225 background-image:url($xwiki.getSkinFile("navigation.png"));
226 width: 21px;
227 height: 22px;
228 }
229 .controlPagination a.nextPagination {
230 background-position:right top;
231 background-image:url($xwiki.getSkinFile("navigation.png"));
232 width: 21px;
233 height: 22px;
234 left: 21px;
235 }
236 .controlPagination a.noNextPagination {
237 background-position:right bottom;
238 background-image:url($xwiki.getSkinFile("navigation.png"));
239 width: 21px;
240 height: 22px;
241 left: 21px;
242 {code}
243
244 1.1.1 HTML Code
245
246 {code}
247 <div class="paginationFooter">
248 <div class="paginationFilter">
249 <span class="controlPagination">
250 <a href="#" title="$msg.get('xe.search.filters.page.prev.title')" class="noPrevPagination"></a>
251 <a href="#" title="$msg.get('xe.search.filters.page.next.title')" class="noNextPagination"></a>
252 </span>
253 <span class="pagination">
254 $msg.get("xe.search.filters.page")
255 <a href="" title="$msg.get('xe.search.filters.page.title',['1'])">1</a>
256 <a href="" class="currentPagination" title="$msg.get('xe.search.filters.page.title',['2'])">2</a>
257 <a href="" title="$msg.get('xe.search.filters.page.title',['3'])">3</a>
258 <a href="" title="$msg.get('xe.search.filters.page.title',['4'])">4</a>
259 <a href="" title="$msg.get('xe.search.filters.page.title',['5'])">5</a>
260 <a href="" title="$msg.get('xe.search.filters.page.title',['6'])">6</a>
261 <a href="" title="$msg.get('xe.search.filters.page.title',['7'])">7</a>
262 <a href="" title="$msg.get('xe.search.filters.page.title',['8'])">8</a>
263 <a href="" title="$msg.get('xe.search.filters.page.title',['9'])">9</a>
264 </span>
265 </div>
266 </div>
267 {code}
268
269 1.1 Dependencies
270
271 1.1.1 Icons
272
273 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