liferay-6 - Liferay Alloy UI ページネーター

Question

こんにちは、デモの例に従って、合金のUIページネーターを使用しています

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

これが私の Web コンテンツ テンプレート コードです。

#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="selected">All news & 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">
                            $articleTitle
                        </div>
                        #set ($counter = $counter + 1)
                    #end
                </div>  
                <div class="paginator"></div>
            </div>
        </div>
    </div>
</div>

AlloyUI ページネーターを使用して foreach ループでアイテムを表示する方法を教えてください。現在、各項目は 1 ページに表示されます。