I have a JSP page where I am showing all the products that fall under a specific category. The problem is that all of them either end up showing either vertically or horizontally based on whether I loop my "td" or "tr". I want to show them in grid where 3 products are in row 1, another 3 in row 2 and so on. Any idea on how this can be achieved?
ProductController.java
List<Product> productsLst = MasterDao.getAllProductsByCategory(new Integer(categoryId));
products.jsp
<table>
<tr>
<%
for (Product p : productsLst) {
%>
<td align="center">
<img src="../images/<%= p.getImage()%>" class="product-grid-img"/>
<br/><div id="product-name"><%= p.getName()%></div>
<br/><div id="money">$ <%= p.getListPrice()%></div>
</td>
<%
}
%>
</tr>
</table>
Just use a counter, if you got 3 products close the tr and open a new tr
Using Guava's Lists.partition() method:
List<List<Product>> rows = Lists.partition(productList);
page.setAttribute("rows", rows);
...
<c:forEach var="row" items="rows">
<tr>
<c:forEach var="product" items="row">
<td> ... details of the product ... </td>
</c:forEach>
</tr>
</c:forEach>
Already answer in this thread
<table>
<s:iterator value="productList" status="status">
<s:if test="#status.index %4 == 0">
<tr>
</s:if>
<td>
<img src="../product/image?imageID=<s:property value="productID"/>&type=thumbnail" />
</td>
<s:if test="#status.index %4 == 0">
</tr>
</s:if>
</s:iterator>
<table>
Related
when i search specific word only first page is classified. it shows pages and posts well on first page.
but when i go to page 2 or next page, seaching keyword doesn't apply on
is this address problem?
i guess this is sql or Paging.java problem because when i print log of page at BDAO it shows page well which i clicked.
also I don't know how can i transfer keyWord &keyField for that..!
I use oracle DB.
<%
String keyWord = (String)request.getParameter("keyWord");
String keyField = (String)request.getParameter("keyField");
%>
<script>
function searchCheck(frm){
//검색
if(frm.keyWord.value ==""){
alert("검색 단어를 입력하세요.");
frm.keyWord.focus();
return;
}
frm.submit();
}
function PageMove(page){
var keyWord = '<%=keyWord%>'
var keyField = '<%=keyField%>'
console.log(keyWord);
if(keyWord !=''){
location.href = "list.do?page="+page+"&keyWord=" + keyWord + "&keyField=" + keyField;
}
location.href = "list.do?page="+page;
}
</script>
</head>
<body>
<table width="800" cellpadding="0" cellspacing="0" border="1">
<tr>
<td>번호</td>
<td>이름</td>
<td>제목</td>
<td>날짜</td>
<td>히트</td>
</tr>
<c:forEach items="${list}" var="dto">
<tr>
<td>${dto.bId}</td>
<td>${dto.bName}</td>
<td>
<c:forEach begin="1" end="${dto.bIndent}">-</c:forEach>
${dto.bTitle}</td>
<td>${dto.bDate}</td>
<td>${dto.bHit}</td>
</tr>
</c:forEach>
<tr>
<td colspan="5">
<form action="list.do" method="post" name="search">
<select name="keyField">
<option value="bTitle">글 제목</option>
<option value="bContent">글 내용</option>
<option value="bName">작성자</option>
</select>
<input type="text" name="keyWord">
<input type="button" value="검색" onclick="searchCheck(form)">
</form>
</td>
</tr>
<tr>
<td colspan="5"> 글작성 </td>
</tr>
</table>
<div class="toolbar-bottom">
<div class="toolbar mt-lg">
<div class="sorter">
<ul class="pagination">
<li>맨앞으로</li>
<li>앞으로</li>
<c:forEach var="i" begin="${paging.startPageNo}" end="${paging.endPageNo}" step="1">
<c:choose>
<c:when test="${i eq paging.pageNo}">
<li class="active">${i}</li>
</c:when>
<c:otherwise>
<li>${i}</li>
</c:otherwise>
</c:choose>
</c:forEach>
<li>뒤로</li>
<li>맨뒤로</li>
</ul>
</div>
</div>
</div>
You never seem to be passing the keyword or keyfield when you call pageMove(). You might as well look up their values inside the function instead of having them as parameters:
function PageMove(page){
var keyWord = document.getElementById("keyWord").value;
var keyField = document.getElementById("keyField").value;
location.href = "list.do?page=" + page + "&keyWord=" + keyWord + "&keyField=" + keyField;
}
I have a table that is generated from a database table. In that database table it has a foreign key linking it back to another database table. However when I print out the field it prints out the full path such as entity."" [""=""]. Is there a way to sanitize it so it will only return the result? I am trying to link to pages and things using the results number. Below in the tickets jsp page you will see I created a link on the sheetNum the directs you to viewBuyer?"buyerNum" however when you click the link instead of it going to say viewbuyer?1 it goes to viewBuyer?entity.BuyerInfo[ buyerNum=1 ]. I want to scrub out all the entity stuff and just be left with the value it is grabbing.
Servlet
case "/tickets":
try{
ticket = TicketDB.getTickets();
request.setAttribute("ticket", ticket);
} catch (NumberFormatException ex) {
ex.printStackTrace();
} break;
tickets.jsp
<div id="body">
<table id="buyerTable">
<c:forEach var="ticket" items="${ticket}" varStatus="iter">
<tr class="${((iter.index % 2) == 0) ? 'grey' : 'white'}">
<td>
${ticket.ticketId}
</td>
<td>
<a href="viewBuyer?${ticket.buyerNum}">
${ticket.sheetNum}
</a>
<br>
</td>
<td>
${ticket.lotNum}
</td>
<td>
${ticket.qty}
</td>
<td>
${ticket.price}
</td>
<td>
${ticket.description}
</td>
<td>
${ticket.buyerNum}
</td>
<td>
${ticket.paid}
</td>
<td>
${ticket.taxable}
</td>
<td>
${ticket.buyersPre}
</td>
<td>
${ticket.datePosted}
</td>
<td>
${ticket.dateUpdated}
</td>
</tr>
</c:forEach>
</table>
</div>
EDIT:
I am retrieving an arraylist of data with data like:[category,content,category,content,...],and
I want to display a table on a JSP page with dynamic data like this:
<tr>
<td align="center">
Category of Tweets:
</td>
<td align="center">
All Tweets of User:
</td>
</tr>
<tr>
<td align="center">
Entertainment
</td>
<td align="center">
Tweet Content
</td>
</tr>
But using the source code I have below:
<table id="table" border="1" align="center">
<tr>
<td align="center">
Category of Tweets:
</td>
<td align="center">
All Tweets of User: <%out.println(userName); %>
</td>
</tr>
<%
for(int i=0;i<stringList.size();i++){
%>
<tr>
<td>
<%
if(i%2==0){
String category = stringList.get(i).toString();
out.print(category);
%>
</td>
<%}else{ %>
<td>
<%
String content = stringList.get(i).toString();
out.print(content);
}
%>
</td>
</tr>
<%
}
%>
</table>
The browser seems to duplicate extra table tags just before the else statement:
<td>
</td>
</tr>
<tr>
<td>
</td>
I am lost on how to resolve this.Could anybody tell me how should I amend the code?
Assuming what you said " I am retrieving an arraylist of data with data like:[category,content,category,content,...]" and that list contains pair elements you can iterate the list like presented below:
<table id="table" border="1" align="center">
<tr>
<td align="center">
Category of Tweets:
</td>
<td align="center">
All Tweets of User: <%out.println(userName); %>
</td>
</tr>
<%
for(int i=0;i<stringList.size()/2;i++){
%>
<tr>
<td align="center">
<%
String category = stringList.get(i*2).toString();
out.print(category);
%>
</td>
<td align="center">
<%
String content = stringList.get(i*2+1).toString();
out.print(content);
%>
</td>
</tr>
<%
}
%>
</table>
Note that category will iterate on elements situated in pair positions and 0 (0,2,4, ...) and content will iterate on elements situated in odd positions (1,3,5, ...)
You were ending <td> after you if condition and then starting a new <td> before the else.
Just try this one and see if it satisfies your expected output.
<td>
<%
if(i%2==0){
String category = stringList.get(i).toString();
out.print(category);
%>
</td>
<td>
<%
String content = stringList.get(i).toString();
out.print(content);
}
%>
</td>
check this code this might help you keep those tr and td tags in conditional statements
<table id="table" border="1" align="center">
<tr>
<td align="center">
Category of Tweets:
</td>
<td align="center">
All Tweets of User: <%out.println(userName); %>
</td>
</tr>
<%
for(int i=0;i<stringList.size();i++){
%>
<%
if(i%2==0){%><tr>
<td><%
String category = stringList.get(i).toString();
out.print(category);
%>
</td></tr>
<%}else{ %>
<tr>
<td>
<%
String content = stringList.get(i).toString();
out.print(content);%>
</td>
</tr><%
}
}
%>
</table>
How about
<td>
<%
if(i%2==0){
String category = stringList.get(i).toString();
out.print(category);
}
%>
</td>
<td>
<%
else{
String content = stringList.get(i).toString();
out.print(content);
}
%>
</td>
its me again. Basically Im checking the roles of a user once they hit a page. Its an array, lets say 1,2,3. The contents of the last column on the jsp for testing has the role #'s that are attached to each individual attachment. The last column wont be on the finished product, but I need to do some sort of IF on that array to see if any of the values in the array:
<c:forEach items = "${hotPartRoles}" var = "hpRole">
${hpRole.id}
</c:forEach>
are in the array of the attachment roles:
<c:forEach items = "${item.roles}" var = "role">
${role.id}
</c:forEach>
jsp:
<table class="data_table">
<tr>
<th>Attachments</th>
//These are the user's Roles
<c:forEach items = "${hotPartRoles}" var = "hpRole">
${hpRole.id}
</c:forEach>
</tr>
<tr>
<td class="subtable">
<table class="data_table">
<c:choose>
<c:when test='${empty attachList}'>
<tr>
<td>No Attachments</td>
</tr>
</c:when>
<c:otherwise>
<tr>
<th>Remove Attachment</th>
<th>File Name</th>
<th>File Type</th>
<th>File Size (bytes)</th>
<th>File Attached By</th>
<th>Date/Time File Attached</th>
<th>Roles</th>
</tr>
<c:forEach var="item" items="${attachList}" varStatus="loopCount">
<tr>
<td class="button">
<rbac:check operation="<%=Operation.DELETE%>">
<button type="button" onclick="javascript:delete_prompt(${item.id});">Delete</button>
</rbac:check>
</td>
<td>${item.fileName}</td>
<td>${item.fileType}</td>
<td><fmt:formatNumber value="${item.fileSize}" /></td>
<td>${item.auditable.createdBy.lastName}, ${item.auditable.createdBy.firstName}</td>
<td><fmt:formatDate value="${item.auditable.createdDate}" pattern="${date_time_pattern}" /></td>
<td>
<c:forEach items = "${item.roles}" var = "role">
${role.id}
</c:forEach>
</td>
</tr>
</c:forEach>
</c:otherwise>
</c:choose>
</table>
Now the arrays ont need to match exactly, just a value in the array of user roles is in the array of attachment roles....
I need to do the check here to determin whether or not to put a disable flag on the "delete" button:
<rbac:check operation="<%=Operation.DELETE%>">
<button type="button" onclick="javascript:delete_prompt(${item.id});">Delete</button>
</rbac:check>
</td>
<td>
Doing 2 nested for loops and having a var set to false initially, then set to true and checking on that var seemed to work
<c:forEach var="item" items="${attachList}" varStatus="loopCount">
<c:set var="dispVal" value="false"/>
<c:forEach items = "${item.roles}" var = "role">
<c:forEach items = "${hotPartRoles}" var = "hpRole">
<c:if test="${hpRole.id == role.id}">
<c:set var="dispVal" value="true"/>
</c:if>
</c:forEach>
</c:forEach>
<tr>
<td class="button">
<rbac:check operation="<%=Operation.DELETE%>">
<button type="button"<c:if test="${dispVal != 'true'}"> disabled="disabled"</c:if>
onclick="javascript:delete_prompt(${item.id});">Delete</button>
Create a custom EL function (which shall be an static method in a class, and a proper descriptor in your TLD file). For example a method with signature boolean contains(Collection collection, Object object). And then call it as <c:if test="x:contains(list, object)">
I'm trying to use a table to display some images, I'm allowed 3 images per row but I'm not sure how to end the table row when I have a row with less then 3 images. See the snippet below for what I've been trying.
Using a ul I would not have to worry about it but I'm directed to use a table. How can I make sure the last row is properly terminated ? I'm newer to jstl.
Thanks,
<% int endTRFlag = 0; %>
<table width="100%">
<tr>
<core:forEach var="imageURL" items="${actionBean.imageURLs}" varStatus="rowCounter">
<td align="center" valign="middle">
<div class="item">
<img src="${imageURL}" alt="Photo 1" class="img" />
</div>
</td>
<% endTRFlag = 1; %>
<core:if test="${ (rowCounter.count % 3 == 0) }">
</tr>
<tr>
<% endTRFlag = 0; %>
</core:if>
<core:if test="${ (rowCounter.count % 3 != 0) && (endTRFlag == 0)}">
</tr>
</core:if>
</core:forEach>
In the code below, I use .index instead of .count because it is 0-based, and so will work better for modulus (0/3, 3/3, etc.). .last is true if the current element is the last element in the list. This solution does cause validation errors in Eclipse (at least Ganymede), which is annoying.
<c:forEach var="imageURL" items="${actionBean.imageURLs}" varStatus="rowCounter">
<c:if test="${rowCounter.index mod 3 eq 0}">
<tr>
</c:if>
<td>stuff</td>
<c:if test="${(rowCounter.index+1) mod 3 eq 0 or rowCounter.last}">
</tr>
</c:if>
</c:forEach>
Just put the </tr> after the loop.
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<c:set var="imageCnt" value="${fn:length(actionBean.imageURLs)}"/>
<table width="100%">
<tr>
<c:forEach var="imageURL" items="${actionBean.imageURLs}"
varStatus="rowCounter">
<td align="center" valign="middle">
<span class="item">
<img src="${imageURL}" alt="Photo 1" class="img" />
</span>
</td>
</c:forEach>
<c:forEach begin="${imageCnt}" end="2">
<td/>
</c:forEach>
</tr>
</table>