Display tag is one of powerful tools for displaying collection on table template, light weight, customizable, and fully supported for java web application. Read more here for more information and how to implement this tools on web projects.
By default, display tag will automatically create pagination and navigation if data length greater than page size property and act as server side process and run synchronously. This mechanism at some point will reduce performance, especially if the displayed data processed without pagination query and has huge massive data.
In this post, will be explained how to combine display tag, Jquery as powerfull ajax framework, and hibernate for making such light mechanism to populate data, display and boost pagination performance. this sample using Struts2 framework.
The steps are :
1. Create 2 jsp files, as main page and display tag page.
mainPage.jsp
<%@ include file=”/include/definitions.jsp”%>
<!DOCTYPE html>
<html lang=”id”>
<head>
<title>Persetujuan Permintaan Pengadaan (PR)</title>
<script type=”text/javascript”>
if (!display)
var display = {};
display.jwebs = {
onTableLoad : function() {
$(“table#s th.sortable”).each(function() {
$(this).click(function() {
var link = $(this).find(“a”).attr(“href”);
jQuery.facebox(‘<div style=”padding: 17px; font-size: 36px;”>Loading….</div>’);
$(“div#hasil”).load(link, {}, display.jwebs.onTableLoad);
jQuery.facebox.close();
return false;
});
});
$(“div#hasil .pagelinks a”).each(function() {
$(this).click(function() {
var link = $(this).attr(“href”);
jQuery.facebox(‘<div style=”padding: 17px; font-size: 36px;”>Loading….</div>’);
$(“div#hasil”).load(link, {}, display.jwebs.onTableLoad);
jQuery.facebox.close();
return false;
});
});
}
};
$(document).ready(
function() {
$(“div#hasil”).load(
“${contextPath}/ajax/report/permintaan.jwebs”, {},display.jwebs.onTableLoad);
});
</script>
</head>
<body>
<!– BreadCrumbs –>
<div class=”breadCrumb module”>
<ul>
<li><s:a action=”dashboard”>Home</s:a></li>
</ul>
</div>
<!– End of BreadCrumbs –>
<div id=”right”>
<div class=”section”>
<!– Alert –>
<s:if test=”hasActionErrors()”>
<div class=”message red”>
<s:actionerror />
</div>
</s:if>
<s:if test=”hasActionMessages()”>
<div class=”message green”>
<s:actionmessage />
</div>
</s:if>
<div class=”box”>
<div class=”title”>
Daftar Permintaan Pengadaan <span class=”hide”></span>
</div>
<div class=”content”>
<div id=”hasil”></div>
</div>
</div>
</div>
</div>
</body>
</html>
display.jsp
<%@ include file=”/include/definitions.jsp”%>
<s:hidden name=”prcMainHeader.ppmId” id=”ppmId”></s:hidden>
<display:table name=”${listPrcMainHeader }” id=”s” pagesize=”10″
excludedParams=”*” style=”width: 100%;” class=”style1″
requestURIcontext=”true”
requestURI=”${contextPath }/ajax/report/permintaan.jwebs”
size=”resultSize” partialList=”true”>
<display:column title=”No.” style=”width: 20px; text-align: center;”>${s_rowNum}</display:column>
<display:column title=”Permintaan” total=”true” style=”width: 200px;”>
<c:choose>
<c:when test=”${update ==1 }”>
<a href=”${contextPath }/procurement/approval.jwebs?id=${s.ppmId }”>${s.ppmNomorPr
}</a>
</c:when>
<c:otherwise>
${s.ppmNomorPr }
</c:otherwise>
</c:choose>
</display:column>
<display:column title=”Nama Permintaan” style=”width: 150px; ”
class=”center”>${s.ppmSubject }</display:column>
<display:column title=”User Skr” style=”width: 150px;” class=”center”>${s.admUserByPpmCurrentUser.completeName }</display:column>
<display:column title=”Satker” style=”width: 100px;” class=”center”>${s.admDept.deptName }</display:column>
<display:column title=”Tanggal” class=”center” style=”width: 200px;”>
<fmt:formatDate value=”${s.createdDate }”
pattern=”HH:mm:ss, dd MMM yyyy” />
</display:column>
<display:column title=”Aksi” class=”center” style=”width: 200px;”>
<input type=”submit” name=”proses” value=”Proses”
onclick=”setValue(‘${s.ppmId }’);FreezeScreen(‘Data Sedang Di proses’)”
class=”uibutton” />
</display:column>
</display:table>
2. create action to populate data.
/**
* main page action
* @return
* @throws Exception
*/
@Action(
results={
@Result(name=SUCCESS,location=”report/mainPage.jsp”),
@Result(name=”ok”,location=”report/pemintaan”, type=”redirectAction”),
},value=”report/permintaan”
)
public String reportPr() throws Exception{
try {
} catch (Exception e) {
addActionError(e.getMessage());
return “ok”;
}
return SUCCESS;
}
/**
* ajax call action
* @return
* @throws Exception
*/
@Action(
results={
@Result(name=SUCCESS,location=”report/ajax/display.jsp”)
},value=”ajax/report/permintaan”
)
public String ajaxReportPr() throws Exception{
try {
model.setResultSize(prcService.countPrcMainHeaderPR(null));
model.setListPrcMainHeader(prcService.listPrcMainHeaderPR(null,model.getPage(request),size));
} catch (Exception e) {
addActionError(e.getMessage());
}
return SUCCESS;
}
3. Add method getPage(HttpRequest) to filter page data from display tag link navigation
/**
* get page from display tag
*
* @param request
* @return
* @author kusumah
*/
public int getPage(HttpServletRequest request) {
int page = 0;
@SuppressWarnings(“rawtypes”)
Enumeration paramNames = request.getParameterNames();
while (paramNames.hasMoreElements()) {
String name = (String) paramNames.nextElement();
if (name != null && name.startsWith(“d-“) && name.endsWith(“-p”)) {
String pageValue = request.getParameter(name);
if (pageValue != null) {
page = Integer.parseInt(pageValue) – 1;
}
}
}
return page;
}
3. create hibernate query to populate data.
public Object getListByDetachedCiteriaPaging(DetachedCriteria crit,int page, int size){
Session ses = HibernateUtil.getSession();
List<Object> lst = new ArrayList<Object>();
Criteria cr = crit.getExecutableCriteria(ses);
cr.setFirstResult(page*size).setMaxResults(size);
lst =cr.list();
ses.clear();
ses.close();
return lst;
}
@Override
public int countPrcMainHeaderPR(Object object) throws Exception {
DetachedCriteria dc = DetachedCriteria.forClass(PrcMainHeader.class);
dc.setResultTransformer(DetachedCriteria.DISTINCT_ROOT_ENTITY);
dc.setProjection(Projections.rowCount());
Object obj = getEntityByDetachedCiteria(dc);
return Integer.valueOf(String.valueOf(obj)).intValue();
}
@SuppressWarnings(“unchecked”)
@Override
public List<PrcMainHeader> listPrcMainHeaderPR(Object object, int page,
int i) throws Exception {
DetachedCriteria dc = DetachedCriteria.forClass(PrcMainHeader.class);
dc.setResultTransformer(DetachedCriteria.DISTINCT_ROOT_ENTITY);
dc.setFetchMode(“admUserByPpmCurrentUser”, FetchMode.JOIN);
dc.setFetchMode(“admDept”, FetchMode.JOIN);
dc.add(Restrictions.isNull(“ppmNomorRfq”));
return (List<PrcMainHeader>) getListByDetachedCiteriaPaging(dc, page, i);
}
and voila …
now display tag paging navigation will use ajax mechanism with internal query paging.
Thursday, 4 April 2013
Jwebs Tower
A. Ahmad Kusumah
Assalamu aliakum ahmad bro,
Mahsha allah your tutotrial is nice , i want source code of your tutorial can you provide me on following email id : [email protected]
Can I just say what a comfort to discover a person that really understands what they’re discussing on the web.
You actually realize how to bring an issue to light and make it important.
A lot more people need to look at this and understand this side of the story.
I was surprised you’re not more popular given that you certainly have the gift.
Thanks for your marvelous posting! I seriously enjoyed reading it, you might be a great author.
I will remember to bookmark your blog and will
often come back very soon. I want to encourage you to definitely continue your great writing, have
a nice morning!
Hello colleagues, nice article and pleasant urging commented here,
I am genuinely enjoying by these.