Forums

Home » Alloy UI » English

Combination View Flat View Tree View
Threads [ Previous | Next ]
Srividhya Mohanasundaram
Alloy UI Paginator
January 15, 2013 3:42 PM
Answer

Srividhya Mohanasundaram

Rank: New Member

Posts: 21

Join Date: June 29, 2012

Recent Posts

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:
  1
  2#set($allTags = [])
  3#set($void = $allTags.add('news'))
  4#set($void = $allTags.add('alert'))
  5
  6#set($tempArr=[])
  7#set($tempArr=$allTags)
  8#set($arr=$tempArr.toArray($allTags))
  9#set($stringArray=$arrayUtil.toStringArray($arr))
 10
 11#set($assetTagLocalService = $serviceLocator.findService("com.liferay.portlet.asset.service.AssetTagLocalService"))
 12#set($tagIds = $assetTagLocalService.getTagIds($groupId,$stringArray))
 13
 14#set($assetEntryQuery = $portal.getClass().forName("com.liferay.portlet.asset.service.persistence.AssetEntryQuery" ).newInstance())
 15#set($V1 = $assetEntryQuery.setAnyTagIds($tagIds))
 16
 17#set($className = $portal.getClass().forName("com.liferay.portlet.journal.model.JournalArticle").getName())
 18#set($V2 = $assetEntryQuery.setClassName($className))
 19
 20#set($assetEntryLocalService = $serviceLocator.findService("com.liferay.portlet.asset.service.AssetEntryLocalService"))
 21#set($assetEntryList = $assetEntryLocalService.getEntries($assetEntryQuery))
 22
 23#set($journalArticleResourceService =$serviceLocator.findService('com.liferay.portlet.journal.service.JournalArticleResourceLocalService'))
 24#set($journalArticleService =$serviceLocator.findService('com.liferay.portlet.journal.service.JournalArticleLocalService'))
 25
 26<style type="text/css">
 27.aui-paginator-container {
 28    margin: 30px;
 29}
 30
 31.paginator-content {
 32    border: 2px solid #CCCCCC;
 33    font-size: 15px;
 34    margin: -10px 40px;
 35    padding: 10px;
 36    width: 534px;
 37}
 38
 39.paginator-content div {
 40    display: none;
 41}
 42</style>
 43
 44
 45<script type="text/javascript">
 46
 47AUI().ready('aui-paginator', function(A) {
 48    var paginator = new A.Paginator(
 49        {
 50            containers: '.paginator',
 51            maxPageLinks: 10,
 52            on: {
 53                changeRequest: function(event) {
 54                    var instance = this;
 55                    var newState = event.state;
 56                    var page = newState.page;
 57
 58                    if (newState.before) {
 59                        var lastPage = newState.before.page;
 60
 61                        A.one('.paginator-content .page' + lastPage).setStyle('display', 'none');
 62                    }
 63
 64                    A.one('.paginator-content .page' + page).setStyle('display', 'block');
 65
 66                    instance.setState(newState);
 67                }
 68            },
 69            rowsPerPage: 3,
 70            rowsPerPageOptions: [ 1, 3, 5, 7 ],
 71            total: 10
 72        }
 73    )
 74    .render();
 75});
 76
 77</script>
 78
 79<div class="main-col">
 80    <div id="post-list" class="pane">
 81        <div class="pane-heading">
 82            <h1>News &amp; Alerts</h1>
 83        </div>
 84        <div class="pane-heading">
 85            <select id="filter-report-tld" name="filter-report-tld">
 86                <option value="">Choose a filter...</option>
 87                <option value="all" selected="selected">All news & alerts</option>
 88                <option value="academy">News</option>
 89                <option value="corp">Alerts</option>
 90            </select>
 91                <div class="clear"></div>
 92        </div>
 93        <div class="pane-body">
 94            <div class="post-table">
 95                <div class="post-list-hg">
 96                      <div class="post-list-title"><a href="xxx">Title</a> - $assetEntryList.size() items</div>
 97                    <div class="post-list-date sort-descend"><a href="xxx">Post date</a></div>
 98                </div>
 99                <div class="paginator"></div>
100                <div class="paginator-content">
101                    #set ($counter = 1)
102                    #foreach($assetEntry in $assetEntryList)
103                        #set($articleResource = $journalArticleResourceService.getJournalArticleResource($assetEntry.getClassPK()))
104                        #set($article = $journalArticleService.getArticle($groupId,$articleResource.getArticleId()))
105                        
106                        #set ($document = $saxReaderUtil.read($article.title))
107                        #set ($root = $document.getRootElement())
108                                                         
109                        #set ($articleTitle = $root.selectSingleNode("Title").getText())
110                        
111                        <div class="page$counter">
112                            <div class="post-list-item">
113                                <div class="post-list-title"><a href="page-post.html">$articleTitle</a><br /></div>
114                                <div class="post-list-date">May 28, 2013</div>
115                            </div>
116                        </div>
117                        #set ($counter = $counter + 1)
118                    #end
119                </div>   
120                <div class="paginator"></div>
121            </div>
122        </div>
123    </div>
124</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.