This website uses cookies to ensure you get the best experience. Learn More.
Use Custom URL Variables to Display certain Paginated Web Content
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.