Question

I’m having this dilemma, not knowing how to solve it.

I have a ArrayList getting information from my database and “drawing it” on a html table.
The problem is that the bigger the info goes, the longer the page it gets. If it has 2000 records, the table gets that long and it’s painful for the user to scroll down.

I want to make a NEXT and PREVIOUS button but I have no clue how to do it.
What I have, and sorry its in Portuguese…

ArrayList<ArrayRegistos> listaRegistos = (ArrayList<ArrayRegistos>) request.getAttribute("listaRegistos");

if (listaRegistos.size() == 0) {

    out.println("<h2>No records</h2>");
    %><%
} else {%><%
            //out.println("<br/>");

            //out.println("<span id=\"cor_tabela\" style=\"color: black;\">");
            out.println("<table id=\"myTable\" border=3 width=\"1100\"height=\"1\">");
            out.println("<thead>");
            out.println("<tr>");
            out.println("<center><td>Estado</td><td>Data Início</td><td>Hora Início</td><td>Técnico</td><td>Serviço</td><td>Descricao</td><td>Data Fim</td><td>Hora Fim</td></center>");
            //out.println("</span>");
            out.println("</tr>");
            out.println("</thead>");
            out.println("<tbody>");
            for (ArrayRegistos i : listaRegistos) {
                out.println("<input type=\"hidden\" name=\"teste\" value=\""+i.getId()+"\"> ");
            //  out.println("<tr>");
            //  out.println("<td>");
                if(i.getEstado().equals("Pendente")){
                    out.println("<tr class=\"pendente\">");
                    out.println("<td>");
                    out.println(String.format("<center><a href=\"DetalheRegisto?detalhe="+i.getId()+"\"><span id=\"cor\" style=\"color: red ;\">"+i.getEstado()+"</span></a></center>"));
                }else if(i.getEstado().equals("Concluído")){
                    out.println("<tr class=\"concluido\">");
                    out.println("<td>");
                    out.println(String.format("<center><a href=\"DetalheRegisto?detalhe="+i.getId()+"\"><span id=\"cor\" style=\"color: green ;\">"+i.getEstado()+"</span></a></center>"));
                }else if(i.getEstado().equals("Validado")){
                    out.println("<tr class=\"validado\">");
                    out.println("<td>");
                    out.println(String.format("<center><a href=\"DetalheRegisto?detalhe="+i.getId()+"\"><span id=\"cor\" style=\"color: blue ;\">"+i.getEstado()+"</span></a></center>"));
                }
                //out.println(String.format("<center>"+i.getEstado()+"</center>"));
                out.println("</td>");
                out.println("<td>");
                out.println(String.format("<center>"+i.getDataInicio()+"</center>"));
                out.println("</td>");               
                out.println("<td>");
                out.println(String.format("<center>"+i.getHoraInicio()+"</center>"));
                out.println("</td>");
                out.println("<td>");
                out.println(String.format("<center>"+i.getTecnico()+"</center>"));
                out.println("</td>");
                out.println("<td>");
                out.println(String.format("<center>"+i.getServico()+"</center>"));
                out.println("</td>");
                out.println("<td>");    
                String descricao = i.getDescricao();
                if (descricao!=null && descricao.length()> 60){

                    out.println("</span>");
                    descricao=descricao.substring(0,40);
                    out.println("<center><span class=\"dropt\" title=\"\">"+descricao+"...</center>");
                    out.println("<span style=\"color: black ;\">"+i.getDescricao()+"</span>");
                    //out.println(String.format("<center>"+descricao+"...</center>"));
                    //System.out.println(descricao);
                }else if(descricao==null){
                    descricao="Sem descrição";
                    out.println(String.format("<center>"+descricao+"</center>"));
                }else if(descricao.isEmpty()){
                    descricao="Sem descrição";
                    out.println(String.format("<center>"+descricao+"</center>"));

                }else{          
                    out.println(String.format("<center>"+i.getDescricao()+"</center>"));
                }
                //out.println(String.format("<center>"+i.getDescricao()+"</center>"));
                out.println("</td>");
                out.println("<td>");
                out.println(String.format("<center>"+i.getDataFim()+"</center>"));
                out.println("</td>");
                out.println("<td>");
                out.println(String.format("<center>"+i.getHoraFim()+"</center>"));
                out.println("</td>");
                out.println("</tr>");



            out.println("</tbody>");
            out.println("</table>");



        }

%></center>

Answer 1

I know that some people think using scriptlets is a sin. But here is a demonstration page.

<%@ page import="java.util.*" %>
<%
   ArrayList<String> list = new ArrayList<String>();
   for(int i = 0; i < 35; i++){
       list.add("item" + i);
   }
   int totalCount = 0;
   int perPage = 10;
   int pageStart = 0; 
   String start = request.getParameter("start");
   if(start != null)pageStart = Integer.parseInt(start);
   if(pageStart < 0)pageStart = 0;
   totalCount = list.size();
   if(pageStart >= totalCount)pageStart = pageStart - perPage;
%>
<a href="<%=request.getRequestURL()%>?start=<%=pageStart - 10 %>">Previous</a>
<%=pageStart + 1 %> - <%=pageStart + 10 %> 
<a href="<%=request.getRequestURL()%>?start=<%=pageStart + 10 %>">Next</a><br/>
<%
   for(int x = pageStart; x < pageStart + perPage && x < list.size(); x++){
       out.print((String)list.get(x) + "<br/>");
   }
%>

If you can use JSTL, then we can avoid using scriptlets.

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="total" scope="session" value="${fn:length(list)}"/>
<c:set var="perPage" scope="session"  value="10"/>
<c:set var="pageStart" value="${param.start}"/>
<c:if test="${empty pageStart or pageStart < 0}">
    <c:set var="pageStart" value="0"/>
</c:if>
<c:if test="${total <= pageStart}">
    <c:set var="pageStart" value="${pageStart - perPage}"/>
</c:if>
<a href="?start=${pageStart - perPage}">Previous</a>${pageStart +1} - ${pageStart + perPage} 
<a  href="?start=${pageStart + perPage}">Next</a><br/>
<c:forEach var="item" items="${list}" begin="${pageStart}" end="${pageStart + perPage - 1}" >
        ${item}<br/>
</c:forEach>