Discussoes de Programacao e Tecnologia

Paginacao de lista em jsp

6 respostas
F
felipe.thiago

Ola pessoal queria saber se vcs podem me ajudar com uma paginacao de uma lista o que queria eh q a cada pagina mostra-se 3 objetos da lista os parametros eu mostro pelos metodos, mas ao invez de mostrar 3 de cada mostro todos nao estou conseguindo controlar

Alura Desenvolvimento Front-End React Do primeiro componente à liderança técnica! HTML/CSS/JavaScript fundamental, React com hooks e...

6 Respostas

F
felipe.thiago 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@page import="com.neomind.fusion.persist.QLGroupFilter"%>
<%@page import="com.neomind.fusion.persist.QLEqualsFilter"%>
<%@page import="com.neomind.fusion.persist.PersistEngine"%>
<%@page import="com.neomind.fusion.doc.NeoDocument"%>
<%@page import="java.util.*"%>
<%@page import="com.neomind.fusion.entity.EntityWrapper"%>
<%@page import="com.neomind.fusion.persist.QLGroupFilter"%>
<%@page import="com.neomind.util.NeoUtils"%>
<%@page import="com.neomind.fusion.entity.EntityRegister"%>
<%@page import="com.neomind.fusion.entity.EntityInfo"%>
<%@page import="com.neomind.fusion.portal.PortalUtil"%>
<%@page import="com.neomind.fusion.common.NeoObject"%>
<%@page import="com.neomind.fusion.entity.InstantiableEntityInfo"%>
<%@page import="com.neomind.fusion.persist.QLRawFilter"%>
<%@page import="com.neomind.fusion.persist.QLFilterParams"%>
<%@page import="com.neomind.fusion.persist.QLFilterIsNotNull"%>
<%@page import="com.neomind.fusion.persist.QLWhere"%>
<%@page import="com.neomind.fusion.persist.QLOpFilter"%>
<%@page import="com.neomind.fusion.persist.QLFilter"%>
<%@page import="com.neomind.fusion.entity.ValueObject"%><html
	xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Acervo Corporativo</title>
<style>
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}

img {
	border: none;
}

a {
	text-decoration: none;
	color: #036;
}

a:hover {
	text-decoration: underline;
	color: #069;
}

.destaque_green {
	font-size: 14px;
	color: #069;
	font-weight: bold;
	text-decoration: underline;
}

.portletPesquisa {
	width: 500px;
	padding: 3px;
	background: #f3f3f3;
}

.listMenu {
	padding-top: 14px;
	border-bottom: 3px solid #3e426f;
	height: 19px;
}

.greyborder {
	border-bottom-color: #f3f3f3;
}

.whiteborder {
	border-bottom-color: #fff;
}

.noborder {
	border: none;
}

a.actived {
	text-decoration: none;
	cursor: pointer;
	padding: 5px;
	padding-bottom: 4px;
	background: url(imagens/bg_bar2.jpg) top left repeat-x #036;
	text-decoration: none;
	cursor: pointer;
	color: #FFF;
	border: 1px solid #3e426f;
}

a.normal {
	text-decoration: none;
	cursor: pointer;
	padding: 5px;
	padding-bottom: 4px;
	background: #FFF;
	text-decoration: none;
	cursor: pointer;
	color: #3e426f;
	border: 1px solid #cccccc;
}

a.normal:hover {
	background: url(imagens/bg_bar3.jpg) top left repeat-x #036;
	color: #FFF;
}

.listTable {
	border-bottom: 1px solid #CCC;
	padding: 15px 0;
}

.listItensA,.listItensB,.listItensC {
	display: none;
}

/*///////*/
#mask {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 9000;
	background-color: #000;
	display: none;
}

#boxes .window {
	position: absolute;
	left: 0;
	top: 0;
	width: 440px;
	height: 200px;
	display: none;
	z-index: 9999;
}

#boxes #dialog {
	background-color: #ffffff;
}

.close {
	display: block;
	text-align: right;
}

#boxes #dialog #dialogBar {
	text-align: right;
	height: 30px;
	background: url(imagens/bg_bar.jpg) top left repeat-x #036;
	color: #FFF;
	font-size: 13px;
}

#boxes #dialog #dialogContent {
	overflow: auto;
	background: #FFF
}

#boxes #dialog #dialogBottom {
	text-align: right;
	padding: 4px;
	background: url(imagens/bg_bar4.jpg) top left repeat-x #CCC;
	color: #333;
	font-size: 11px;
	border: 1px solid;
	border-color: #999;
}
</style>
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
//modal
$(document).ready(function() {	

	$('a[name=modal]').click(function(e) {
		e.preventDefault();
		
		var id = $(this).attr('href');
	
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
	
		$('#mask').css({'width':maskWidth,'height':maskHeight});

		$('#mask').fadeIn("fast");	
		$('#mask').fadeTo("slow",0.8);	
	
		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();
        
		$(id).css('width', winW/1.5);
		$(id).css('height', winH/1.5);
		$("#dialogContent").css('padding',10);
		dh=(winH/1.5)-$("#dialogBar").height()-20-$("#dialogBottom").height();

		$("#dialogContent").css('height',dh);
		
		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
	$(id).show();
	//clica no item de aba que deve ser aberto
	thisId = $(this).attr('id');
		if(thisId=='toAvanc'){
			changeMenu('avanc','ultim')
		}else{
			changeMenu('ultim', 'avanc')
		};
	//
		
		
	
	});
	
	$('.window .close').click(function (e) {
		e.preventDefault();
		
		$('#mask').hide();
		$('.window').hide();
	});		
	
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});			
	
});
function changeMenu(toAct, toDeact)
{
	var toAct = document.getElementById(toAct);
	var toDeact = document.getElementById(toDeact);
	if(toAct.className =="actived")
	{
		toAct.className="normal";
		document.getElementById('listItensA').style.display ="none";
		document.getElementById('listItensB').style.display ="none";
		document.getElementById('listMenu2').className ="listMenu noborder whiteborder";
	}else{
		toAct.className ="actived";
		toDeact.className ="normal";
		document.getElementById('listMenu2').className ="listMenu";
		if(toAct.id=='avanc'){
			document.getElementById('listItensA').style.display ="block";
			document.getElementById('listItensB').style.display ="none";
		} else if(toAct.id=='ultim'){
			document.getElementById('listItensA').style.display ="none";
			document.getElementById('listItensB').style.display ="block";
			}
	}
}
//abre e fecha o mennu favoritos
function openFav(fav)
{
	var fav = document.getElementById(fav);
	if(fav.className=="actived")
	{
		fav.className = "normal";
		document.getElementById('listItensC').style.display ="none";
		document.getElementById('listMenu').className ="listMenu greyborder";

	}else{
		fav.className = "actived";
		document.getElementById('listItensC').style.display ="block";
		document.getElementById('listMenu').className ="listMenu";
	}
}
function validaCampos(pesq){
           if(document.pesq.textfield.value="" && document.pesq.textfield2.value="")
               {
                alert("Informe o titulo ou o nome do autor do documento");
                return false;
                }
return true;
       	}
</script>
</head>
<body>
<div class="portletPesquisa">
<form name=pesq method="post">
<div>
<table width="500" border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td width="245">T&iacute;tulo</td>
		<td width="10">&nbsp;</td>
		<td width="245">Autor</td>
	</tr>
	<tr>
		<td><input type="text" name="textfield" id="textfield"
			style="border: 1px solid #CCC; width: 245px" /></td>
		<td>&nbsp;</td>
		<td><input type="text" name="textfield2" id="textfield2"
			style="border: 1px solid #CCC; width: 245px" /></td>
	</tr>
	<tr>
		<td height="40" align="right" colspan="3"><a
			href="javascript:document.pesq.submit()" class="normal"><img
			src="imagens/magnifier.png" width="16" height="16" align="absmiddle" />Pesquisar</a>
		</td>
	</tr>
</table>
</div>
</form>
<hr color="#CCCCCC" />
<div class="listMenu greyborder" id="listMenu"><a href="#"
	class="normal"><img src="imagens/page.png" width="16" height="16"
	align="absmiddle" /> Publicar Documento</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a
	href="#dialog" name="modal" class="normal" id="toAvanc"><img
	src="imagens/magnifier_zoom_in.png" width="16" height="16"
	align="absmiddle" /> Pesquisa Avan&ccedil;ada</a>&nbsp;<a href="#dialog"
	name="modal" class="normal" id="toUltim"><img
	src="imagens/application_form_magnify.png" width="16" height="16"
	align="absmiddle" /> &Uacute;ltimas Pesquisas</a> <a
	href="javascript:openFav('fav')" class="normal" id="fav"><img
	src="imagens/star.png" width="16" height="16" align="absmiddle" />
Favoritos</a></div>
<%
	String title = NeoUtils.safeOutputString((String) request
			.getParameter("textfield"));
	String author = NeoUtils.safeOutputString((String) request
			.getParameter("textfield2"));

	int limit = 3;
	int qtdPages = 0;

	try {
		InstantiableEntityInfo info = (InstantiableEntityInfo) EntityRegister
				.getInstance().getCache().getByType("Teste");

		String pagina = request.getParameter("pagina"); // página atual
		if (pagina == null) {
			pagina = "1";
		}
		int limitValue = (Integer.parseInt(pagina) * limit) - limit;

		QLGroupFilter filter = new QLGroupFilter("OR");
		filter.addFilter(new QLEqualsFilter("titulo", title));
		filter.addFilter(new QLEqualsFilter("autor", author));
		List<NeoObject> lista = PersistEngine.getObjects(info
				.getEntityClass(), filter);

		int sizeList = lista.size();
		if (lista != null && !lista.isEmpty()) {
		
			for (NeoObject docs : lista) {
				EntityWrapper wrapper = new EntityWrapper(docs);
%>
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="0"
	class="listTable">
	<tr>
		<td width="10%" rowspan="2" align="center" valign="middle"><img
			src="imagens/ico_jornal.jpg" alt="Abrir" width="15" height="20" /></td>
		<td align="left" valign="middle">
		<p><span class="titulo_3"> <strong>T&iacute;tulo
		do Arquivo: </strong> <%
			out.print(wrapper.getField("titulo").getValue());
		%> </span> <br />
		<strong>Autor: </strong> <%
			out.print(wrapper.getField("autor").getValue());
		%> <strong> C&oacute;d.: </strong> <%
			out.print(wrapper.getField("codigodoc").getValue());
		%> <br />
		<strong>Arquivo : </strong> <%
			out.print(wrapper.getField("file").getValue());
		%>
		</p>
		</td>
	</tr>
	<tr>
		<td align="left" valign="middle"><a href="#dialog"><img
			src="imagens/zoom.png" width="16" height="16" align="absmiddle" />
		Visualizar</a> | <a href="#"><img src="imagens/map_magnify.png"
			width="16" height="16" align="absmiddle" /> Visualizar </a><a href="#">Status</a>
		| <a href="#"><img src="imagens/star.png" width="16" height="16"
			align="absmiddle" /> Favoritos</a></td>
	</tr>
</table>
</div>
<%
	}
			int anterior;
			if (Integer.parseInt(pagina) != 1) {
				anterior = Integer.parseInt(pagina) - 1;
				out
						.println("<a href=?pagina="
								+ anterior
								+ "><img src='imagens/seta_prev.png' width='12' height='12' align='absmiddle' />"
							    + " Anteriores</a>");
			} else
				out.println(" Anteriores ");

			int numOfPages = sizeList / limit;
			int i;

			for (i = 1; i <= numOfPages; i++) {
				if (i == Integer.parseInt(pagina)) {
					out.println("<b>" + i + "</b> ");
				} else {
					out.println("<a href=?pagina=" + i + ">" + i
							+ "</a> ");
				}
			}

			if ((sizeList % limit) != 0) {
				if (i == Integer.parseInt(pagina)) {
					out.println(i + " ");
				} else {
					out.println("<a href=?pagina=" + i + ">" + i
							+ "</a> ");
				}
			}

			int proxima;
			if ((sizeList - (limit * Integer.parseInt(pagina))) > 0) {
				proxima = Integer.parseInt(pagina) + 1;

				out
						.println("<a href=?pagina="
								+ proxima
								+ ">Próximos "
								+ "<img src='imagens/seta_next.png' width='12' height='12' align='absmiddle' /></a>");
			} else {
				out.println("Próximos ");
			}
		}
	} catch (NullPointerException e) {
		e.printStackTrace();
	}
%>
<div id="boxes">
<div id="dialog" class="window">
<div id="dialogBar">
<table width="100%" cellpadding="4" cellspacing="0" border="0"
	height="30px;">
	<tr>
		<td align="center" valign="middle"><span>Acervo</span></td>
		<td align="right" valign="middle" width="16"><a href="#"
			class="close" title="Fechar"><img src="imagens/cross.png"
			width="16" height="16" /></a></td>
	</tr>
</table>
</div>
<div id="dialogContent">
<div class="listMenu whiteborder" id="listMenu2"><a
	href="javascript:changeMenu('avanc', 'ultim');" class="normal"
	id="avanc"><img src="imagens/magnifier_zoom_in.png" width="16"
	height="16" align="absmiddle" /> Pesquia Avan&ccedil;ada</a>&nbsp;<a
	href="javascript:changeMenu('ultim','avanc');" id="ultim"
	class="normal"><img src="imagens/application_form_magnify.png"
	width="16" height="16" align="absmiddle" /> &Uacute;ltimas Pesquisas</a></div>
</div>
</div>
</div>
</body>
</html>
B
br.com.henry

Caaara que macarrão está esta página hein!

Olha, a paginação de itens se baseia em:

Obter a lista de itens (List)
Varrer esta lista e criar uma matriz de 2 dimensões a qual significa

objetos[pagina][totalPorPagina]

criei há pouco este método para isso

Onde IModel é uma interface com um método get e set de Id, a qual todos os Models do sistema implementa.

/*
*  Método para paginação de itens
*  int pagina -  qdo o usuário clica num número ou item numa lista referente a página desejada
*  List&lt;Object&gt; objetos - Object pode ser a interface usada por seus Models (IModel contendo um certificado para Id por exemplo) - Esta lista vem do banco de dados ou de outra fonte...
*  int totalPorPagina - Uma regra que pode ser determinada pelo usuário, a partir de uma lista de valores, referente a qts itens serão mostrados em cada página
*/
public static List&lt;IModel&gt; paginarItems(int pagina, List&lt;IModel&gt; objetos, int totalPorPagina) throws Exception
    {
        List&lt;IModel&gt; objetosPaginaDesejada = new ArrayList&lt;IModel&gt;();
        double total = objetos.size();
        double totalCalc = total / totalPorPagina;
        int paginas = (int)Math.ceil(totalCalc);
        IModel[][] objModelo = new IModel[paginas][totalPorPagina];
        int count = 0;
        for(int x = 0; x &lt; paginas; x++)
        {
            for(int y = 0; y &lt; totalPorPagina; y++)
            {
                if(objetos.size() &gt; 0)
                {
                    objModelo[x][y] = (IModel)objetos.get(0);
                    objetos.remove(0);
                }
                count++;
            }
        }
        for(int y = 0; (double)y &lt; totalPorPagina; y++){
            if(objModelo[pagina - 1][y] != null){
            	objetosPaginaDesejada.add(objModelo[pagina - 1][y]);
            }
        }
        return objetosPaginaDesejada;
    }

E pode ser útil tbm, saber quantas páginas será necessário no total para exibir seus itens:

PaginacaoItens.java

public static int calcularPaginasItems(List&lt;IModel&gt; objetos, int totalPorPagina)
    {
        double total = objetos.size();
        double totalCalc = total / totalPorPagina;
        int paginas = (int)Math.ceil(totalCalc);
        return paginas;
    }

Para usar estes componentes vc faz o seguinte:

public static void exibirDados(int paginaDesejada, int totalPorPagina){
     List&lt;IModel&gt; objetosLista = objetoDAO.getTodos(); // ou outro método q retorne uma lista
     int totalItensEncontrados = objetosLista .size();
     if(totalItensEncontrados &gt; 0){	
          int totalPaginas = PaginacaoItens.calcularPaginasItems(objetosLista , totalPorPagina);
						
          try{
		List&lt;IModel&gt; objetosDaPaginaAtual = PaginacaoItens.paginarItems(pagina, objetosLista, totalPorPagina);
							
		System.out.println("Objetos da pagina atual: "+objetosDaPaginaAtual.size());
							
		StringBuilder xml = new StringBuilder();
		xml.append("&lt;?xml version=\"1.0\" encoding=\"iso-8859-1\"?&gt;\n");
		xml.append("&lt;objetos totalItens=\"");
							
		// total de contas encontradas
		xml.append(totalItensEncontrados);
							
		xml.append("\" paginaAtual=\"");
							
		// página atual
		xml.append(pagina);
							
		xml.append("\" totalPaginas=\"");
							
		// total de páginas
		xml.append(totalPaginas);
							
		xml.append("\" totalPorPagina=\"");
							
		// total por página
		xml.append(totalPorPagina);
							
		xml.append("\"&gt;\n");
							
		// inicia lista paginada
		for(IModel seuObj : objetosDaPaginaAtual){
		     ExemploObj exemploObj = (ExemploObj) seuObj;
		     xml.append("\t&lt;exemplo id=\"");
								
		     //id
		     xml.append(exemploObj.getId());
								
		     xml.append("\"&gt;");
								
		     // nome exemploObj
		     xml.append(exemploObj.getNome());
		
		     xml.append("&lt;/exemplo&gt;\n");
	              }
	              // final lista
							
	              xml.append("&lt;/objetos&gt;\n");
	              PrintWriter out = response.getWriter();
	              out.println(xml.toString());

	}catch(Exception e){
	     // trate o erro caso haja algum
                }
}

Este exemplo apresenta uma saída dos dados resultantes em xml… mas pode usar html também. O importante é ter compreendido. :slight_smile:
Abraços e sucesso!

F
felipe.thiago

valeu pela dica mas poderia me mostrar como ficaria isso com o meu codigo

principio estou fazendo uma pesquisa no banco com aquelas classses Qlfilter que sao aqui da empresa mas isso eh irelevante o que qro q me mostre eh como poderia fazer para mostrar os dados da lista de 3 em 3 a cada pagina o que estou fazendo eh um for que mostra uma tabela com cada objeto mas esta retornando tudo :S

as linhas que podes mudar ficam entre 342 e 378 ali mostro os dados

abaixo tem a tela onde faço a busca e mostro os documentos (Objetos)

2009/12/17/80e3197170c1f0b1ac4c31e6d62a7255_66189.gif_1280×1024 36.7 KB

P
Pedrosa

Cara use um componente que faz essa paginação por vc:
http://displaytag.homeip.net/displaytag-examples-1.2/

A
Abdon

Pedro bela foto em bonito esse lugar é D++++++

Concordo contigo, se puder utilize displaytag, que fica trivial fazer paginação, se não puder, pelo amor de deus faça algo na sua action pode ser até o código do br.com.henry. Ou se forem muitos resultados, pode ser que vc precise ir no banco limitando os recursos de acordo com a linguagem do mesmo.

F
felipe.thiago 
# <table width="100%" border="0" cellspacing="0" cellpadding="0"  
#     class="listTable">  
#     <tr>  
#         <td width="10%" rowspan="2" align="center" valign="middle"><img  
#             src="imagens/ico_jornal.jpg" alt="Abrir" width="15" height="20" /></td>  
#         <td align="left" valign="middle">  
#         <p><span class="titulo_3"> <strong>Título  
#         do Arquivo: </strong> <%  
#             out.print(wrapper.getField("titulo").getValue());  
#         %> </span> <br />  
#         <strong>Autor: </strong> <%  
#             out.print(wrapper.getField("autor").getValue());  
#         %> <strong> Cód.: </strong> <%  
#             out.print(wrapper.getField("codigodoc").getValue());  
#         %> <br />  
#         <strong>Arquivo : </strong> <%  
#             out.print(wrapper.getField("file").getValue());  
#         %>  
#         </p>  
#         </td>  
#     </tr>  
#     <tr>  
#         <td align="left" valign="middle"><a href="#dialog"><img  
#             src="imagens/zoom.png" width="16" height="16" align="absmiddle" />  
#         Visualizar</a> | <a href="#"><img src="imagens/map_magnify.png"  
#             width="16" height="16" align="absmiddle" /> Visualizar </a><a href="#">Status</a>  
#         | <a href="#"><img src="imagens/star.png" width="16" height="16"  
#             align="absmiddle" /> Favoritos</a></td>  
#     </tr>  
# </table>

qro que os dados sejam mostrados cada um numa tabela como esta ai

Criado 17 de dezembro de 2009
Ultima resposta 18 de dez. de 2009
Respostas 6
Participantes 4

Topicos relacionados

Icone de aplicação web 11 respostas Erro: The method is undefined for the type 5 respostas Glassfish acesso externo 5 respostas Download GlassFish[RESOLVIDO] 4 respostas Deletando todas as linhas de uma tabela (javascript) 13 respostas
Alura VSCode: extensões mais usadas Quais as extensões que podem auxiliar na hora desenvolvimento na IDE Visual Studio Code
Casa do Codigo Seguranca em front-end: Estrategias para mitigar ataques... Por Antonio Luis Rossi — Casa do Codigo