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 current_link = 0;
while(number_of_pages >
current_link){
current_link++;
}
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;}
--------------------------------------------------------------------------
No comments:
Post a Comment