Exibiçao de consulta SQL na tela

Matheus Peluchi · Novembro 16, 2016

Pessoal boa tarde...estou começando agora no HP Mysql, e tenho um dificuldade muito grande de ajeitar os dados na tela.

estou desenvolvendo um software para consulta de preços, em minhas consultas na maioria das vezes retornam grandes quantidades de linhas (aproximadamente 10 a 1000 linhas dependendo da consulta e sempre com 30 colunas), e alguns desses campos chegam a 400 caracteres.

Então vem a dificuldade , atualmente estou exibindo os dados em tabelas.

É recomendável o uso de tabelas pra exibição de dados? Se nao qual a melhor forma de organiza - los. Pois com tabela fica muito feio e ainda nao encontrei uma forma de alinhar os dados.

segue abaixo o codigo usado e uma imagem da exibiçao dos dados.

<DOCTYPE html>
<html>
<head>
	<style>
		table {
			width: 650px;
			border-collapse:collapse;
			border:1px solid #FFCA5E;
			white-space:nowrap;
			font-size:12;
		}
		caption {
			font: 1.8em/1.8em Arial, Helvetica, sans-serif;
			text-align: left;
			text-indent: 10px;
			background: url(bg_caption.jpg) right top;
			height: 45px;
			color: #FFAA00;
		}
		thead th {
			background: url(bg_th.jpg) no-repeat right;
			height: 47px;
			color: #FFFFFF;
			font-size: 0.8em;
			font-weight: bold;
			padding: 0px 7px;
			margin: 20px 0px 0px;
			text-align: left;
			border-right: 1px solid #FCF1D4;
		}
		tr {
		background: url(bg_td1.jpg) repeat-x top;
		width:50px	;
		}
		tbody tr.odd {
			background: #FFF8E8 url(bg_td2.jpg) repeat-x;
		}

		tbody th,td {
			font-size: 0.8em;
			line-height: 1.4em;
			font-family: Arial, Helvetica, sans-serif;
			color: #777777;
			padding: 10px 7px;
			border-top: 1px solid #FFCA5E;
			border-right: 1px solid #DDDDDD;
			text-align: left;
			width: 100px;
		}

	</style>
</head>
<body>

<div class="tabela">
	<?php
		require_once"verificalogin.php";
		require_once"conexao.php";

		
		$busca = $_POST['edtconsulta'];	
		$consulta = "select * from sinapi where desc_composicao like '%$busca%' limit 0,10";
		$result = mysqli_query($con,$consulta) or die (mysqli_error());	
		
				echo '<Table>';
					echo '<th>Desc. Classe</th>';
					echo '<th>Sigla</th>';
					echo '<th>Desc. Tipo </th>';
					echo '<th>Sigla </th>';
					echo '<th>Cod. Agrupador</th>';
					echo '<th>Desc. Agrupador</th>';
					echo '<th>Cod. Composição</th>';
					echo '<th>Desc. Composição</th>';
					echo '<th>Unidade</th>';
					echo '<th>Origem preço</th>';
					echo '<th>Custo Total</th>';
					echo '<th>Tipo de item </th>';
					echo '<th>Cod. Item</th>';
					echo '<th>Desc. Item</th>';
					echo '<th>Unidade</th>';
					echo '<th>Origem do Preço</th>';
					echo '<th>Coeficiente</th>';
					echo '<th>Preço Unit.</th>';
					echo '<th>Custo Total Item</th>';
					echo '<th>Custo M. Obra</th>';
					echo '<th>% M. Obra</th>';
					echo '<th>Custo Material</th>';
					echo '<th>% Material</th>';
					echo '<th>Custo Equip.</th>';
					echo '<th>% Equip.</th>';
					echo '<th>Custo Serv. Terceiros</th>';
					echo '<th>% Serv. Terceiros </th>';
					echo '<th>Cusot Outros</th>';
					echo '<th>% Outros</th>';				
					echo '<th>Vinculo</th>';
				echo '</table>';
				echo '<br>';
		
				
		while ($sql = mysqli_fetch_array($result)){
					
			echo'<table>';
				echo  '<tr>';
					echo	'<td>'.$sql["desc_classe"].'</td>';
					echo	'<td>'.$sql["sigla_classe"].'</td>';
					echo	'<td>'.$sql["desc_tipo"].'</td>';
					echo	'<td>'.$sql["sigla_tipo"].'</td>';
					echo	'<td>'.$sql["cod_agrupador"].'</td>';
					echo	'<td>'.$sql["desc_agrupador"].'</td>';
					echo	'<td>'.$sql["id_composicao"].'</td>';
					echo	'<td>'.$sql["desc_composicao"].'</td>';
					echo	'<td>'.$sql["unidade"].'</td>';
					echo	'<td>'.$sql["origem_preco"].'</td>';
					echo	'<td>'.$sql["custo_total"].'</td>';
					echo	'<td>'.$sql["tipo_item"].'</td>';
					echo	'<td>'.$sql["id_item"].'</td>';
					echo	'<td>'.$sql["desc_item"].'</td>';
					echo	'<td>'.$sql["unidade_item"].'</td>';
					echo	'<td>'.$sql["origem_preco_item"].'</td>';
					echo	'<td>'.$sql["coeficiente"].'</td>';
					echo	'<td>'.$sql["preco_unitario"].'</td>';
					echo	'<td>'.$sql["custo_total_item"].'</td>';
					echo	'<td>'.$sql["custo_mobra"].'</td>';
					echo	'<td>'.$sql["porcentagem_mobra"].'</td>';
					echo	'<td>'.$sql["custo_material"].'</td>';
					echo	'<td>'.$sql["porcentagem_material"].'</td>';
					echo	'<td>'.$sql["custo_equipamento"].'</td>';
					echo	'<td>'.$sql["porcentagem_equipamento"].'</td>'; 
					echo	'<td>'.$sql["custo_servter"].'</td>';
					echo	'<td>'.$sql["porcentagem_servter"].'</td>';
					echo	'<td>'.$sql["custo_outros"].'</td>';
					echo	'<td>'.$sql["porcentagem_outros"].'</td>';
					echo	'<td>'.$sql["vinculo"].'</td>';
				echo  '</tr>';		
			echo'</table>';
			
			}				
	?>
</div>	

</body>
</html>

aoliveira178 · Novembro 17, 2016

Olá.

Se necessita tabular dados, a melhor opção ainda são as tabelas e um framework de estilização facilita muito seu trabalho, veja os exemplos do Bootstrap - http://www.w3schools.com/bootstrap/bootstrap_tables.asp

O problema da sua formação é que você está criando uma tabela para cada laço do while. Você deveria criar uma única tabela e repetir apenas os elementos <TR> e <TD>

Note que no código abaixo criei apenas uma tabela;

<?php
echo '<Table><TR>'; // aqui deveria ter um TR para abrir a linha
echo '<th>Desc. Classe</th>';
echo '<th>Sigla</th>';
echo '<th>Desc. Tipo </th>';
echo '<th>Sigla </th>';
echo '<th>Cod. Agrupador</th>';
echo '<th>Desc. Agrupador</th>';
echo '<th>Cod. Composição</th>';
echo '<th>Desc. Composição</th>';
echo '<th>Unidade</th>';
echo '<th>Origem preço</th>';
echo '<th>Custo Total</th>';
echo '<th>Tipo de item </th>';
echo '<th>Cod. Item</th>';
echo '<th>Desc. Item</th>';
echo '<th>Unidade</th>';
echo '<th>Origem do Preço</th>';
echo '<th>Coeficiente</th>';
echo '<th>Preço Unit.</th>';
echo '<th>Custo Total Item</th>';
echo '<th>Custo M. Obra</th>';
echo '<th>% M. Obra</th>';
echo '<th>Custo Material</th>';
echo '<th>% Material</th>';
echo '<th>Custo Equip.</th>';
echo '<th>% Equip.</th>';
echo '<th>Custo Serv. Terceiros</th>';
echo '<th>% Serv. Terceiros </th>';
echo '<th>Cusot Outros</th>';
echo '<th>% Outros</th>'; 
echo '<th>Vinculo</th>';
echo '</TR>' //fecho a linha do cabeçalho.

while ($sql = mysqli_fetch_array($result)){

//vou repetir apenas o elemento <TR> que vem após o cabeçalho
echo  '<tr>';
echo '<td>'.$sql["desc_classe"].'</td>';
echo '<td>'.$sql["sigla_classe"].'</td>';
echo '<td>'.$sql["desc_tipo"].'</td>';
echo '<td>'.$sql["sigla_tipo"].'</td>';
echo '<td>'.$sql["cod_agrupador"].'</td>';
echo '<td>'.$sql["desc_agrupador"].'</td>';
echo '<td>'.$sql["id_composicao"].'</td>';
echo '<td>'.$sql["desc_composicao"].'</td>';
echo '<td>'.$sql["unidade"].'</td>';
echo '<td>'.$sql["origem_preco"].'</td>';
echo '<td>'.$sql["custo_total"].'</td>';
echo '<td>'.$sql["tipo_item"].'</td>';
echo '<td>'.$sql["id_item"].'</td>';
echo '<td>'.$sql["desc_item"].'</td>';
echo '<td>'.$sql["unidade_item"].'</td>';
echo '<td>'.$sql["origem_preco_item"].'</td>';
echo '<td>'.$sql["coeficiente"].'</td>';
echo '<td>'.$sql["preco_unitario"].'</td>';
echo '<td>'.$sql["custo_total_item"].'</td>';
echo '<td>'.$sql["custo_mobra"].'</td>';
echo '<td>'.$sql["porcentagem_mobra"].'</td>';
echo '<td>'.$sql["custo_material"].'</td>';
echo '<td>'.$sql["porcentagem_material"].'</td>';
echo '<td>'.$sql["custo_equipamento"].'</td>';
echo '<td>'.$sql["porcentagem_equipamento"].'</td>'; 
echo '<td>'.$sql["custo_servter"].'</td>';
echo '<td>'.$sql["porcentagem_servter"].'</td>';
echo '<td>'.$sql["custo_outros"].'</td>';
echo '<td>'.$sql["porcentagem_outros"].'</td>';
echo '<td>'.$sql["vinculo"].'</td>';
echo  '</tr>'; 
} 
echo'</table>';
?>

Mateus Silva · Novembro 17, 2016

Cara o que eu te recomendaria fazer visando um UI/UX bem melhor seria, na tabela você exibe apenas alguns campos essenciais para identificar o item, como o nome, um código identificador, enfim, pouca coisa, umas 4 ou 5 colunas no máximo, ou mais se necessário, mas não passando de 10 que aí já ficaria muita informação pra uma tela só. E aí você cria um link passando pela URL um parâmetro id correspondente ao id do item clicado para uma página onde vão conter as outras informações do item em questão, assim sua tabela vai ficar bem limpa, bonita e mais organizado na hora de buscar uma informação.

Outra dica é pra fazer paginação e um formulário de busca, já que podem vir centenas de resultados ;)

aoliveira178 · Novembro 17, 2016

infinite-scroll é muito mais eficiente do que paginação e exige menos tempo de desenvolvimento.

https://github.com/infinite-scroll/infinite-scroll

Matheus Peluchi · Novembro 17, 2016

vlw pelas dicas pessoal, usei a dica do aoliveira178 e funcionou, escrevendo a tabela da forma correta e coloquei tb no CSS a opção white-space: nowrap; na tag table e ficou bem melhor o visual.

aoliveira178 · Novembro 18, 2016

Legal!

Agora que resolveu o seu problema, analise com carinho a preciosa dica do Mateus Silva, você precisa realmente mostrar todo este volume de dados?

Entrar

Arquivado

Exibiçao de consulta SQL na tela

Recommended Posts

Matheus Peluchi 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

aoliveira178 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Mateus Silva 64

Compartilhar este post

Link para o post

Compartilhar em outros sites

aoliveira178 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Matheus Peluchi 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

aoliveira178 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante