Jquery paginator for Liferay 6.1
This tutorial tells you how to make a custom jquery paginator in your liferay portlet.
This example is about photoalbums, but the page can contain whatever in the <div “image”>
The jquery file is specified in header-portlet tag in the liferay-portlet.xml :
<header-portlet-javascript>/js/jquery-1.8.3.js </header-portlet-javascript>
or in the jsp directly (as you can see below)
The code in the ViewPhotos.jsp is:
<script type="text/javascript" src="${renderRequest.contextPath}/js/jquery-1.8.3.js"></script> images = ImageLocalServiceUtil.getAllImagesbyAlbumId(albumId); String albumName= (String) request.getAttribute("albumName"); %> <div id="<portlet:namespace/><br />"><span style="color: blue;">Photogallery DEMO Version 0.X </span> <script type="text/javascript"> var $jq = jQuery.noConflict(true); $(document).ready(function(){ $('#content').Pagination(); }); </script> <div id="wrapper-content"> <h2>Photo album Paginator</h2> <div class="pagination"> <ul> <li><a href="#" id="prev"><button>Previous</button></a> <li><a href="#" id="next"><button>Next</button></a></li> </ul> </div> <div id="content"> No images found. <div class="image"> <img class="center" src="/<%=albumName=>/<%=path%>" alt="" width="40%" /> Image: </div> </div> <!-- content --> </div> <!-- wrapper-content --> </div> <!-- portletnamespace -->
Remember to wrap it all with : <strong><div id=”<portlet:namespace/>”></strong>
In my demo the “albumName” folder specified in the image attribute src is set in the xml file:
/home/laura/project/liferay-portal-6.1.0-ce-ga1/tomcat-7.0.23/conf/Catalina/localhost/albumName.xml
The content of the xml file is something the following:
<?xml version=”1.0″ encoding=”UTF-8″?>
<Context path=”/albumName” docBase=”/home/laura/albums/albumName” reloadable=”true”/>
“albumName” might be something like “birthday_Party_Laura_2013”
the jquery plugin (that I’ve placed in the main.js file) is the following:
(function($) { // Attach a new method to jQuery $.fn.extend({ // PluginName - Pagination Pagination : function(options) { console.log("plugin"); // Set the default values, use comma to separate the settings, // example: var defaults = { fadeSpeed : 100 }; // options can be extended when the plugin is invoked var options = $.extend(defaults, options); // Creating a reference to the object var objContent = $(this); // child div of the "content" one var imageDivList = new Array(); var lastPage = 1; var paginatedPages; // initialization function init = function() { // for each div $('.image').each(function() { imageDivList.push(this); }); // objContent.children().hide(); $('.image').hide(); console.log($(imageDivList).length); // show first page (lastPage=1) showPage(lastPage); // draw controls showPagination($(imageDivList).length); }; // end init function // show page function showPage = function(page) { i = page - 1; if (imageDivList[i]) { console.log(i); // hiding old page, display new one $(imageDivList[lastPage]).fadeOut(options.fadeSpeed); lastPage = i; $(imageDivList[lastPage]).fadeIn(options.fadeSpeed); } }; // show pagination function (draw switching numbers) showPagination = function(numPages) { var pagins = ''; for ( var i = 1; i <= numPages; i++) { pagins += '<li><a href="#" onclick="showPage(' + i + '); return false;"><button>' + i + '</button></a></li>'; } // // after the firt element, with id="prev", append the list with // the page number links $('.pagination li:first-child').after(pagins); }; // perform initialization init(); // and binding 2 events - on clicking to Prev $('.pagination #prev').click(function() { showPage(lastPage); }); // and Next $('.pagination #next').click(function() { showPage(lastPage + 2); }); } }); // pass jQuery to the function, })(jQuery);
The css for the paginator buttons, that I have specified in the main.css file is:
ul, li { list-style-type: none; margin-left:40px; } .pagination { clear: both; padding:0; /* width:250px; */ } .pagination li { float:left; margin-left: 0 auto; }