How to display the html table with all the rows returned from the database in jsp?

Question

I have below html and java code to display one row in html table.

<table id="myTable" border="0" cellspacing="0" style="border-spacing:0; width:100%;border-collapse: collapse;">
            <%
                Object object = request.getAttribute("myContact");
                MyModel myModel = (MyModel)object;

                String mail = myModel.getmail()!=null ? myModel.getmail().toString().trim() : "";
                String title = myModel.gettitle()!=null ? myModel.gettitle().toString().trim() : "";
                String name = myModel.getname()!=null ? myModel.getname().toString().trim() : "";               
            %>

            <tr>
            <td class="table-border-bottom"><label for="name">Name:</label></td>
            <td class="table-border-bottom"><input id="name" type="text" value='<%=name%>' name="name" class="required" style="height: 17px;"/>
            </td>
            <td class="table-border-bottom"><label for="contactTitle">Title:</label></td>
            <td class="table-border-bottom"> <input id="title" type="text" value='<%=title%>' name="title" class="required" style="height: 17px;"/>

            </td>
            <td class="table-border-bottom"><label for="mail">Email:</label></td>
            <td class="table-border-bottom"><input id="mail" type="text" value='<%=mail%>' name="mail" class="required email" style="height: 17px; "/>

            </td>
            </tr>


            <tr align="center">
            <td valign="bottom" colspan="6" style="height: 45px; ">
            <input type="button" id="submit" name="submit" value="Save" style="width: 80px ; height:24px; text-align: center;border-radius: 10px 10px 10px 10px;"/> 
            <input type="button" id="revert" name="revert" value="Revert" style="width: 80px ; height:24px;text-align: center;border-radius: 10px 10px 10px 10px;"/></td>
            </tr>

      </table>

I get one row from the database and keep in request scope then i access the same in jsp and displayed in html table as above. It works well without any issues. Now the problem is i get list of rows from database and i need to display then in html as multiple rows. Also, i have to assign unique ids for each component of the row and also CSS styes need to be applied as above. In such a case how can i repeat above the logic in loop to display list of rows with css styles properly?

Thanks!

score 1 · Answer 1 · edited May 23 '17 at 11:57

If your MyModel class has bean style getters like :

public String getMail() {
   return this.mail;
}

You should use EL like ${myContact.mail} to retrieve the value of mail attribute.

It is even better to use JSTL's <c:out value="${myContact.mail}"> tag to avoid cross-site scripting.

In case you want to display a List<MyModel> , set it in the request scope in the Servlet which forwards the request to your JSP .

request.setAttribute("myModelsList",myModelsListObject);

Then use , JSTL's <forEach> loop to iterate over each element of the List and display it .

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
 ...
<table>
   <c:forEach items="${myModelsList}" var="myModel" varStatus="count">
    <tr id="${count.index}">
        <td>${myModel.mail}</td>
        <td>${myModel.title}</td>
        <td>${myModel.name}</td>
    </tr>
  </c:forEach>
</table>

Read also :

Thanks for reply. if i use JSTL, can i directly apply CSS styles for tds and assign unique ids to access the elements through JQuery? Thanks! — user1016403, Jul 29 '13 at 14:51
Read my answer and go through the links (2) and (3) . You can assign unique IDs , there is no problem. — AllTooSir, Jul 29 '13 at 14:52

score 1 · Accepted Answer · answered Jul 29 '13 at 14:41

Instead of sending one object from your server code send list of object which you want to display as list of rows.

I have not tested, you please take care of handling null check.

<table id="myTable" border="0" cellspacing="0" style="border-spacing:0; width:100%;border-collapse: collapse;">
            <%
                List<Object> object = (List<Object>)request.getAttribute("myContact");
        for(int i=0;i<object.size();i++){
                MyModel myModel = (MyModel)object.get(i);
                String mail = myModel.getmail()!=null ? myModel.getmail().toString().trim() : "";
                String title = myModel.gettitle()!=null ? myModel.gettitle().toString().trim() : "";
                String name = myModel.getname()!=null ? myModel.getname().toString().trim() : "";               
            %>


            <tr>
            <td class="table-border-bottom"><label for="name">Name:</label></td>
            <td class="table-border-bottom"><input id="name" type="text" value='<%=name%>' name="name" class="required" style="height: 17px;"/>
            </td>
            <td class="table-border-bottom"><label for="contactTitle">Title:</label></td>
            <td class="table-border-bottom"> <input id="title" type="text" value='<%=title%>' name="title" class="required" style="height: 17px;"/>

            </td>
            <td class="table-border-bottom"><label for="mail">Email:</label></td>
            <td class="table-border-bottom"><input id="mail" type="text" value='<%=mail%>' name="mail" class="required email" style="height: 17px; "/>

            </td>
            </tr>

    <% } %>

            <tr align="center">
            <td valign="bottom" colspan="6" style="height: 45px; ">
            <input type="button" id="submit" name="submit" value="Save" style="width: 80px ; height:24px; text-align: center;border-radius: 10px 10px 10px 10px;"/> 
            <input type="button" id="revert" name="revert" value="Revert" style="width: 80px ; height:24px;text-align: center;border-radius: 10px 10px 10px 10px;"/></td>
            </tr>

      </table>

Also, it would be helpful to you by going with JSTL instead of doing with scriptlet.

For styling of rows, apply class like

CSS

.rowClass{
  /* APPLY STYLE TO ROWS */
}

if i use jstl, how can i apply CSS styles for the table data? Also, i need to assign unique ids for the tds so that i can do something with the ids using jquery...Please help me — user1016403, Jul 29 '13 at 14:48

score 0 · Answer 3 · answered Jul 29 '13 at 14:49

Instead, of one single Contact object you would now set a List<Contact> instead as a request attribute.

List<Contact> myContacts = (List<Contact>) request.getAttribute("myContacts");

Then just use an Iterator with a while loop.

<table id="myTable" border="0" cellspacing="0" style="border-spacing:0; width:100%;border-collapse: collapse;">
<%
    List<Contact> myContacts = (List<Contact>) request.getAttribute("myContacts");

    Iterator<Contact> contacts = myContacts.iterator();
    while (contacts.hasNext()) {
      Contact myModel = contacts.next();

      String mail = myModel.getmail()!=null ? myModel.getmail().toString().trim() : "";
      String title = myModel.gettitle()!=null ? myModel.gettitle().toString().trim() : "";
      String name = myModel.getname()!=null ? myModel.getname().toString().trim() : "";               
%>

<tr>
<td class="table-border-bottom"><label for="name">Name:</label></td>
<td class="table-border-bottom"><input id="name" type="text" value='<%=name%>' name="name" class="required" style="height: 17px;"/>
</td>
<td class="table-border-bottom"><label for="contactTitle">Title:</label></td>
<td class="table-border-bottom"> <input id="title" type="text" value='<%=title%>' name="title" class="required" style="height: 17px;"/>

</td>
<td class="table-border-bottom"><label for="mail">Email:</label></td>
<td class="table-border-bottom"><input id="mail" type="text" value='<%=mail%>' name="mail" class="required email" style="height: 17px; "/>

</td>
</tr>

<% } // close loop
 %>

<tr align="center">
<td valign="bottom" colspan="6" style="height: 45px; ">
<input type="button" id="submit" name="submit" value="Save" style="width: 80px ; height:24px; text-align: center;border-radius: 10px 10px 10px 10px;"/> 
<input type="button" id="revert" name="revert" value="Revert" style="width: 80px ; height:24px;text-align: center;border-radius: 10px 10px 10px 10px;"/></td>
</tr>

</table>

How to display the html table with all the rows returned from the database in jsp?

3 Answers3

Linked