JSP Data table Limit number of rows on each div - html

Question

I'm doing a page where i display some labels and input text field so the user can introduce some data and send it back to the server. But sometimes the server send back more than 50 rows of information. In this case the user need to scoll multiple times in order to see all the fields. I want to create 2/3 divs and each contains maybe ~20 fields so that all fields can be displayed without scrolling. Any idea?
Here is my code
<div class="container">
<div class="row">
<f:view>
<h:form>
<h:dataTable value="#{Message.bits}" var="bit">
<h:column>
<div class="col-lg-4">
<h:outputText value="#{bit.id} #{bit.name}" />
<div class="input-group">
<h:inputText styleClass="form-control" size="100"
maxlength="100" value="#{bit.value}" />
</div>
</p>
</div>
</h:column>
</h:dataTable>
</h:form>
</f:view>
</div>
</div>
Class Message -> A container of bits. It is a bean manager
#ManagedBean
#ViewScoped
public class Message implements Serializable {
/**
*
*/
private static final long serialVersionUID = 2712306195992874273L;
private List<Bit> bits = null;
public List<Bit> getBits() {
return bits;
}
//Do more things
Bit class
public class Bit implements Serializable {
/**
*
*/
private static final long serialVersionUID = -6341896264030346040L;
private String name = null;
private String value = null;
private int id = 0;
//Business logic
I can use html, css, any js framework, jsp,java.
Thanks for your time.

Answer 1

If I got your question right, you want to display your data like this:
1 4 7
2 5 8
3 6 9
Instead of this:
1
2
3
4
5
..
I don't know if this is the best solution but it works for me.
You can try the code below.
<div class="row">
<ui:repeat var="bit" value="#{message.bits}" varStatus="bitstatus">
<h:outputText escape="false" value="<div class='col-lg-4'>" rendered="#{(bitstatus.index + 1) % 20 eq 1}" />
<h:outputText value="#{bit.id} #{bit.name}" />
<div class="input-group">
<h:inputText styleClass="form-control" size="100" maxlength="100" value="#{bit.value}" />
</div>
<h:outputText escape="false" value="</div>" rendered="#{(productstatus.index + 1) % 5 eq 0}" />
</ui:repeat>
</div>