Wednesday, July 28, 2010

Display tag - Opensource JSP paging library...


Paging is important part when we have much data to show at once. We need to do all hectic coding for paging, like keep the total count, then count total pages to be shown, keep total records per page etc... This is nothing new but repeating and it takes bit time. So why not use some lib which gives you all of this with basic tags?

Note from the homepage : "The display tag library is an open source suite of custom tags that provide high-level web presentation patterns which will work in an MVC model. The library provides a significant amount of functionality while still being easy to use."

Basic steps to use are:

1. Get the jar file from http://displaytag.sourceforge.net and put it in classpath.

2. In your JSP page write following import for taglib.

 <%@ taglib uri="http://displaytag.sf.net" prefix="display" %>  

3. Check the following code for displaying the list of Objects as table with paging. You can configure different propeties of table as below, also can define CSS classes for diff. tags.


 <display:table name="lstObject" defaultsort="1" pagesize="20" sort="external" partialList="true"   
     size="totalCount" uid="lstObject" id="myObject"  
             export="false" requestURI="<%=someUrl%>" class="data">   
               
             <!-- For detailed understanding for each property, check the link http://displaytag.sourceforge.net/1.2/configuration.html -->  
             <display:setProperty name="paging.banner.placement" value="both" />  
             <display:setProperty name="paging.banner.group_size" value="10" />      
             <display:setProperty name="paging.banner.no_items_found">  
                 <span class="lfloat">No {0} found.</span>  
             </display:setProperty>  
             <display:setProperty name="paging.banner.one_item_found">  
                 <span class="lfloat">One {0} found.</span>  
             </display:setProperty>              
             <display:setProperty name="paging.banner.all_items_found">  
                 <span class="lfloat">{0} {1} found, displaying all {2}.</span>  
             </display:setProperty>  
             <display:setProperty name="paging.banner.some_items_found">  
                 <span class="lfloat">{0} {1} found, displaying {2} to {3}.</span>  
             </display:setProperty>              
             <display:setProperty name="paging.banner.full">  
                 <div class="paging_footer">  
                     <div class="rfloat">  
                         <div class="lfloat" style="padding-top:6px;">[<a href="{1}">First</a> | <a href="{2}">Prev</a>]</div>  
                         <div class="paging_wrap lfloat">                          
                             {0}                          
                         </div>  
                         <div class="rfloat" style="padding-top:6px;">[<a href="{3}">Next</a> | <a href="{4}">Last</a>]</div>  
                     </div>  
                 </div><br>  
             </display:setProperty>  
             <display:setProperty name="paging.banner.first">  
                 <div class="paging_footer">  
                     <div class="rfloat">  
                         <div class="lfloat" style="padding-top:6px;">[First | Prev]</div>  
                         <div class="paging_wrap lfloat">  
                              {0}  
                         </div>  
                         <div class="rfloat" style="padding-top:6px;">[<a href="{3}">Next</a> | <a href="{4}">Last</a>]</div>  
                     </div>  
                 </div><br>  
             </display:setProperty>          
             <display:setProperty name="paging.banner.last">                  
                 <div class="paging_footer">  
                     <div class="rfloat">  
                         <div class="lfloat" style="padding-top:6px;">[<a href="{1}">First</a> | <a href="{2}">Prev</a>]</div>  
                         <div class="paging_wrap lfloat">                          
                             {0}  
                         </div>  
                         <div class="rfloat" style="padding-top:6px;">[Next | Last]</div>  
                     </div>  
                 </div><br>  
             </display:setProperty>  
             <display:setProperty name="paging.banner.onepage" value="" /> <!-- Because dont want to show any value if only one page...-->  
               
             <display:setProperty name="paging.banner.page.selected">  
                 <div class="lfloat">  
                     <a onclick="return false;" class="active" href="javascript:void(0);">{0}</a>  
                 </div>  
             </display:setProperty>                      
             <display:setProperty name="paging.banner.page.link">  
                 <div class="lfloat">  
                     <a href="{1}" title="Goto page {0}">{0}</a>  
                 </div>  
             </display:setProperty>  
               
             <display:setProperty name="paging.banner.page.separator" value=" " />    <!-- Seperator between page numbers ,, i.e this will show "[First | Prev] 1 2 3 [Last | Next]"-->          
             <% MyObject myObject = (MyObject)pageContext.getAttribute("myObject"); %> <!-- Get the object from pageContext, which is writter in 'id' attribute -->  
              <display:column title="My title" class="first">  
              <!-- An y HTMl or jsp scriptlet can be used here... -->  
              </display:column>  
              <display:column property="name" title="2nd Column"/>  
              <display:column title="3rd Column"><%= myObject.getSomeValue() %></display:column>  
              ...               
         </display:table>  

4. The displaytag table can be used as follows. Where,

- pagesize is total records per page

- sort="external" means list given is sorted

- size defined the total records for which paging will be done

- name defines the list object for which the table will be generated

- id means internal object for each row which can be used in JSP scriptlets to do some data manipulations.

 <display:table name="lstObject" defaultsort="1" pagesize="20" sort="external" partialList="true"   
     size="totalCount" uid="lstObject" id="myObject"  
             export="false" requestURI="<%=someUrl%>" class="data">  
             ...  
             </display:table>  

5. You can set any property for display tag as below. You can also write HTML inside the property tag. For detailed understanding for each property this library supports, check the link - http://displaytag.sourceforge.net/1.2/configuration.html

 <display:setProperty name="paging.banner.page.separator" value=" " />

2 Comments:

Anonymous said...

I would like to exchange links with your site javalibs.blogspot.com
Is this possible?

Parth Barot said...

Yes, sure it is possible if your site is appropriate content wise...

check our homepage, techdudes.blogspot.com and please contact us in detail...