CODEWITHSUNDEEP
javascripthtmlspringjspstruts
Ace
Ace

Reputation: 869

How to Split Table nicely in JSP

I have created a table for displaying books be signed out/in of an department. There are sorted on: Name, Date. Every so often (after some check-ins and check outs are made) the books are inventoried to confirm how many are available (and numbers are corrected according).

I currently have a table that displays all of the books sorted by Name, Date. But since there are a lot of rows I was hoping to have collapsible section based on when this type of book was inventoried.

Desired:

Name |  Date | Count | Action
-----------------------------
- First Foo Section -
Foo    SomeD     +3    check-in
Foo    SomeD     -1    check-out
Foo    SomeD     5     inventoried
+ Another Foo Section
+ Bar Section

Current Code:

<c:forEach var='item' items='${bookLogs}'>
            <tr>
                <td>${f:replaceNewLineWithBR(f:escapeHtml(item.name))}</td>
                <td><c:out value='${item.date.formattedValue}'/></td>
                <td>${f:replaceNewLineWithBR(f:escapeHtml(item.count))}</td>
                <td>${f:replaceNewLineWithBR(f:escapeHtml(item.actionType))}</td>
            </tr>
    </c:forEach>

Should I do a test on item.actionType? Or should I pass bookLogs as a list of lists for the different collapsing sections in the table?

Upvotes: 1

Views: 1096

Answers (3)

user941960
user941960

Reputation:

Look into Bootstrap, it has some really epic features, especially with tables.

http://twitter.github.com/bootstrap/

Upvotes: 0

Bageshwar Pratap Narain
Bageshwar Pratap Narain

Reputation: 98

I'd suggest you use widely available JS based Table/Grid solutions for clients.

http://www.omnisdata.com/omnigrid/

http://dhtmlx.com/docs/products/dhtmlxGrid/index.shtml

and many others.I have personally used Omnigrid and found its worth investing a couple of hours to come up with this kind of a thing which scales to future requirements and current trends.

Upvotes: 0

wizage
wizage

Reputation: 320

My comment above didn't answer your question but here is a tutorial on how to do it http://www.a2ztechguide.com/2011/07/javascript-expand-collapse-table-rows.html.

I did this a long time ago with a database and it is no fun now we are using xml and display just what we need.

The link above does a great job and explains how to use javascript to make the expand and collapse. Your above code was on the right track but not quite there yet.

Upvotes: 4

Related Questions