Alloy UI Paginator

[Srividhya Mohanasundaram, módosítva 11 év-val korábban]

Hi I am using alloy ui paginator by following the demo example

https://www.liferay.com/community/liferay-projects/alloy-ui/demo?title=community-liferay-projects-alloy-ui-demos-paginator

Here is my web content template code:

#set($allTags = [])
#set($void = $allTags.add('news'))
#set($void = $allTags.add('alert'))

#set($tempArr=[])
#set($tempArr=$allTags)
#set($arr=$tempArr.toArray($allTags))
#set($stringArray=$arrayUtil.toStringArray($arr))

#set($assetTagLocalService = $serviceLocator.findService("com.liferay.portlet.asset.service.AssetTagLocalService"))
#set($tagIds = $assetTagLocalService.getTagIds($groupId,$stringArray))

#set($assetEntryQuery = $portal.getClass().forName("com.liferay.portlet.asset.service.persistence.AssetEntryQuery" ).newInstance()) 
#set($V1 = $assetEntryQuery.setAnyTagIds($tagIds))

#set($className = $portal.getClass().forName("com.liferay.portlet.journal.model.JournalArticle").getName())
#set($V2 = $assetEntryQuery.setClassName($className))

#set($assetEntryLocalService = $serviceLocator.findService("com.liferay.portlet.asset.service.AssetEntryLocalService"))
#set($assetEntryList = $assetEntryLocalService.getEntries($assetEntryQuery))

#set($journalArticleResourceService =$serviceLocator.findService('com.liferay.portlet.journal.service.JournalArticleResourceLocalService'))
#set($journalArticleService =$serviceLocator.findService('com.liferay.portlet.journal.service.JournalArticleLocalService'))

<style type="text/css">
.aui-paginator-container {
	margin: 30px;
}

.paginator-content {
	border: 2px solid #CCCCCC;
	font-size: 15px;
	margin: -10px 40px;
	padding: 10px;
	width: 534px;
}

.paginator-content div {
	display: none;
}
</style>


<script type="text/javascript">

AUI().ready('aui-paginator', function(A) {
	var paginator = new A.Paginator(
		{
			containers: '.paginator',
			maxPageLinks: 10,
			on: {
				changeRequest: function(event) {
					var instance = this;
					var newState = event.state;
					var page = newState.page;

					if (newState.before) {
						var lastPage = newState.before.page;

						A.one('.paginator-content .page' + lastPage).setStyle('display', 'none');
					}

					A.one('.paginator-content .page' + page).setStyle('display', 'block');

					instance.setState(newState);
				}
			},
			rowsPerPage: 3,
			rowsPerPageOptions: [ 1, 3, 5, 7 ],
			total: 10
		}
	)
	.render();
});

</script>

<div class="main-col">
	<div id="post-list" class="pane">
		<div class="pane-heading">
			<h1>News &amp; Alerts</h1>
		</div>
		<div class="pane-heading">
			<select id="filter-report-tld" name="filter-report-tld">
				<option value="">Choose a filter...</option>
				<option value="all" selected>All news &amp; alerts</option>
				<option value="academy">News</option>
				<option value="corp">Alerts</option>
			</select>
				<div class="clear"></div>
		</div>
		<div class="pane-body">
			<div class="post-table">
				<div class="post-list-hg">
		  			<div class="post-list-title"><a href="xxx">Title</a> - $assetEntryList.size() items</div>
					<div class="post-list-date sort-descend"><a href="xxx">Post date</a></div>
				</div>
				<div class="paginator"></div>
				<div class="paginator-content">
					#set ($counter = 1)
					#foreach($assetEntry in $assetEntryList)
						#set($articleResource = $journalArticleResourceService.getJournalArticleResource($assetEntry.getClassPK()))
						#set($article = $journalArticleService.getArticle($groupId,$articleResource.getArticleId()))
						
						#set ($document = $saxReaderUtil.read($article.title))
						#set ($root = $document.getRootElement())
														 
						#set ($articleTitle = $root.selectSingleNode("Title").getText())
						
						<div class="page$counter">
							<div class="post-list-item">
								<div class="post-list-title"><a href="page-post.html">$articleTitle</a><br></div>
								<div class="post-list-date">May 28, 2013</div>
							</div>
						</div>
						#set ($counter = $counter + 1)
					#end
				</div>	
				<div class="paginator"></div>
			</div>
		</div>
	</div>
</div>

Could you please tell me how to display items in my foreach loop using the alloyUI paginator. Right now each item appears in one page.