JQuery Pagination with web Content structure and Layout

[12年前 に DarshanKumar N Bhatia によって更新されました。]

JQuery Pagination with web Content structure and Layout
-----------------------------------------------------------------------------------------------------------------
Hi All,
First u can check demo of pagination here http://web.enavu.com/demos/paginate/ .
Download a attached paginate.7z folder.
U can check same demo by running paginate/index.html file.
To develop same type of pagination steps are given below :

First create a Structure :

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>

Save this structure.

Second Create a Velocity Template :
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 :

Paste following code in it :
<!-- CSS Section Start -->
<link href="$paginate_external_css.getData()" rel="stylesheet" type="text/css" />
<!-- CSS Section END -->

<!-- JS Section Start -->

<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())
<!-- JS Section End -->
<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 = '<a class="previous_link" href="javascript:previous();">Prev</a>';
var current_link = 0;
while(number_of_pages > current_link){
navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
current_link++;
}
navigation_html += '<a class="next_link" href="javascript:next();">Next</a>';
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>


Or U can copy content from ‘liferay-pagination-template.vm’ attached in zip file.

Third : Uploading JS,CSS and Jquery files.
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
Fourth : Creating a pagination of web content .
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

Advantage
Fast and Easy
Zero Development
Disadvantage :
Note web content should not contains css classes name ''#baap-content'' and ".beta-child" as here

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

get conflict in pagination.

Some Concern :

Is it good practice to keep. JAVASCRIPT ( .js) and CSS file in document library portlet ??

If css is like

. image-loading { background: url(../img/progress.gif) }

Then where need to keep images file so that css can access it ???

If CSS and JAVASCRIPT file are kept in theme....then
How to access it in Web content template Editor ???

Some Resource Links :

Coin Slider Integration ....

Liferay Image Slider
---------------------------------------------------------------------------------------------------------------------------
Thanks and Regards
DarshanKumar Bhatia