Blogs
Ever wanted to explicitly define what page to display on the current pagination content from a url password?
This code should aim you in the right direction. Logic: -Get url variable ("page") value.
-set $total to the size of the pagination repeatable structure.
-If $pageId is set and is less than or equal to $total then use $pageId; else use the latest item.
#set ($friendlyURL = $request.get('attributes').get('CURRENT_COMPLETE_URL'))
#set ($pageId = $httpUtil.getParameter($friendlyURL, 'page"))
#set ($total = $image.siblings.size())
#if($pageId != "" && $getterUtil.getInteger($pageId) <= $total)
#set($targetPage = $pageId)
#else
#set($targetPage = $total)
#end
#foreach($image in $image.siblings)
<img src="${image.data}" />
#end
Pagination JS that can be included in the velocity file
- define page: to be $targetPage
<script type="text/javascript">
AUI().ready('aui-paginator', function(A) {
var pgA = new A.Paginator({
page: ${targetPage},
containers: '.paginatorA',
total: 10,
maxPageLinks: 10,
rowsPerPage: 1,
circular: true,
rowsPerPageOptions: [ 1, 3, 5, 7 ],
on: {
changeRequest: function(event) {
var instance = this;
var newState = event.state;
var page = newState.page;
// newState.total = 100;
if (newState.before) {
var lastPage = newState.before.page;
A.one('.contentA .page' + lastPage).setStyle('display', 'none');
}
A.one('.contentA .page' + page).setStyle('display', 'block');
// IMPORTANT!
// we need to .setState(newState) or .set(STATE, newState)
// to update the UI
instance.setState(newState);
}
}
})
.render();
});
</script>
*note: Have the Pagination JS code in the same template velocity file as the web content.