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: 22

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.

Participate in the State of Liferay Community 2017. Help the community and even win some prizes!