Liferay Pagination in Web Content

    1)   Creating pagination of web content using jQuery + Web Content Structure+ Web Content Layout.

Demo Link: http://web.enavu.com/demos/paginate/

 

1] Login to Liferay as admin.

2] Go to control panel.

3] Click on Web Content Panel –Go to structure tab.

4] Click add Structure button.

Fill the form:

--- Check auto generate id check box.

--- Enter name as ‘jquery-pagination’

--- Enter description as ‘jquery-pagination’

--- Click launch editor button – pop will come—

--- Enter:

<root> 

       <dynamic-element name='show_per_page' type='text' index-type='' repeatable='false'>

       dynamic-element> 

       <dynamic-element name='paginate_external_js' type='document_library' index-type='' repeatable='false'>

       dynamic-element> 

       <dynamic-element name='jquery_min_js' type='document_library' index-type='' repeatable='false'>

       dynamic-element> 

       <dynamic-element name='paginate_external_css' type='document_library' index-type='' repeatable='false'>

       dynamic-element> 

       <dynamic-element name='PaginationBox' type='text' index-type='' repeatable='true'>   

              <dynamic-element name='web_content' type='text_area' index-type='' repeatable='false'>

              dynamic-element> 

       dynamic-element>

root>

5] Go to Control Panel-web content panel-Templates  Tab

6] Click on ‘Add template’ button

Fill form :

Name : jquery_pagination

Description : jquery_pagination

Select Structure : jquery_pagination

Click on Launch editor :

       <link href="$paginate_external_css.getData()" rel="stylesheet" type="text/css" />

      

      

      

       <script type="text/javascript" src="$jquery_min_js.getData()"> script> 

       <script type="text/javascript" src="$paginate_external_js.getData()"> script> 

       #set ( $show_per_page_in = $show_per_page.getData()) 

      

      

       <script type="text/javascript">

                     var show_per_page = '$show_per_page_in';

       script>

      

       <script type="text/javascript">

       jQuery(document).ready(function(){

              var number_of_items = jQuery('#baap-content').children(".beta-child").size();

              var number_of_pages = Math.ceil(number_of_items/show_per_page);

              jQuery('#current_page').val(0);

              jQuery('#show_per_page').val(show_per_page);

              var navigation_html = 'Prev';

              var current_link = 0;

              while(number_of_pages > current_link){

                     navigation_html += ' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'';

                     current_link++;

              }

              navigation_html += 'Next';

              jQuery('#page_navigation').html(navigation_html);

              jQuery('#page_navigation .page_link:first').addClass('active_page');

              jQuery('#baap-content').children().css('display', 'none');

              jQuery('#baap-content').children(".beta-child").slice(0, show_per_page).css('display', 'block');

       });

       script>

       <input type='hidden' id='current_page' />

       <input type='hidden' id='show_per_page' />

       <div id='baap-content'>

       #foreach ($item in $PaginationBox.getSiblings())

      

              #foreach ( $itemData in $item.getChildren() ) 

                     #if ( "$itemData.getName()" == "web_content" ) 

                           #set ( $web_content = $itemData.getData() )

                     #end    

              #end

              <div class='beta-child'>

              '$web_content'

              div>

       #end 

       div>

       <div id='page_navigation'>div>

 

7] Go to Control panel –Document Library—

-- Create new folder ‘jquery-pagination’

-- upload following files in it.

                   external-pajinate.css

                   externate-pajinate.js

                   jQuery-min.js

8] Go to main site :

9] Place web content portlet on page—click on new icon.

10] Select structure as jQuery-pagination

-- Fill form :

Name : jQuery-pagination

Show-per-page : 3

Pajinate-external-js: select external-pajinate.js from document library.

jQuery-min-js : select jquery.min.js from document library.

Pajinate-external-css : select external-pajinate.css from document library.

Paginate Box : Box1

Web Content : Enter web content that u want .

Repeat fields Box 1 and Web content by clicking on plus sign.

11] Save and Publish

12] Pagination in web content is ready.

 external-pajinate.css :

.pagination {list-style:none; margin:0px; padding:0px;}  

.pagination li{float:left; margin:3px;}  

.pagination li a{   display:block; padding:3px 5px; color:#fff; background-color:#44b0dd; text-decoration:none;}  

.pagination li a.active {border:1px solid #000; color:#000; background-color:#fff;}  

.pagination li a.inactive {background-color:#eee; color:#777; border:1px solid #ccc;}

--------------------------------------------------------------------------