Skip to Content

Wiki source code of Pagination

Version 10.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 Upper navigation
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 Details
270
271 Add additional details here.
272
273 1.1 Dependencies
274
275 1.1.1 Icons
276
277 navigation.png
278
279 1.1.1 Translations
280
281 1.1.1.1 Sort Translations
282
283 xe.search.filters.sort=Sort:
284
285 xe.search.filters.relevance=Relevance
286
287 xe.search.filters.relevance.title=Sort by Relevance
288
289 xe.search.filters.date=Date
290
291 xe.search.filters.date.title=Sort by Date
292
293 xe.search.filters.rating=Rating
294
295 xe.search.filters.rating.title=Sort by Rating
296
297 xe.search.filters.popularity=Popularity
298
299 xe.search.filters.popularity.title=Sort by Popularity
300
301 1.1.1.1 Navigation Translations
302
303 xe.search.filters.results=Results
304
305 xe.search.filters.results.of=out of
306
307 xe.search.filters.page=Page
308
309 xe.search.filters.page.title=Page {0}
310
311 xe.search.filters.page.prev.title=Previous Page
312
313 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