Sistema de busca sem refresh php

marlone · Maio 19, 2017

Como inserir um sistema de busca na minha tabela sem refresh, me ajudem por favor :D

<?php
	require('class/validacao.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php
		$titulo = "Controle &raquo; Listar Material";
		require_once ("includes/header.php"); 
	?>
</head>
<title> Listar material </title>
<style>
table, td, th {    
    border: 1px solid #ddd;
    text-align: left;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    padding: 15px;
}
</style>
</head>
<body>
				<?php
	require_once('includes/testes.php');
	?>
	
		
<?php
// Conexão ao banco
require_once('conexao.php');
?>
<div id="principal">
<h1>MATERIAIS</h1>

				<form action="<?php $_SERVER['PHP_SELF']?>" method="post">
	

					
<?php
echo"<table width='100%' border='1'>";
echo '<table>';
echo '<tr>';
echo'<td>id</td>';
echo'<td>NOME</td>';
echo'<td>SETOR</td>';
echo'<td>Estoque  Atual</td>';
echo'<td>MINIMO</td>';
echo'<td>Entrada</td>';
echo'<td>Saida</td>';
echo'<td>Editar</td>';
echo'<td>Excluir</td>';
echo '</tr>';
$result_mat = "SELECT * FROM tbl_material";
$resultado_mat = mysqli_query($conn, $result_mat);
while($row_mat = mysqli_fetch_assoc($resultado_mat)){
echo '<tr>';
echo '<td>'.$row_mat["id"].'</td>';
echo '<td>'.$row_mat["NOME"].'</td>';
echo '<td>'.$row_mat["SETOR"].'</td>';
echo '<td>'.$row_mat["QUANTIDADE"].'</td>';
echo '<td>'.$row_mat["MINIMO"].'</td>';
echo '<td><a href="form_entrada.php?id='.$row_mat['id'].'">✚</a>
      <td><a href="form_saida.php?id='.$row_mat['id'].'">▬</a>
		<td><a href="form_alteracao_material.php?id='.$row_mat['id'].'">✐</a>
      <td><a href="deleta1.php?id='.$row_mat['id'].'">✖</a>
      </tr>';
}
echo '</table>';

?>
										
		
				</form>
			</div> <!-- Fim da div#principal -->
				<?php include('includes/fimerodape.php'); ?>

</body>

</html>

ViniciusPuttiMorais · Maio 29, 2017

Voce deve usar ajax. Voce vai precisar de uma funcao JavaScript que vai basicamente fazer o PHP rodar novamente:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       //aqui voce recebera a resposta do PHP
       document.getElementById("demo").innerHTML = xhttp.responseText;
    }
};
xhttp.open("GET", "arquivo.php", true);
xhttp.send();

Era isso?

gabrieldarezzo · Junho 1, 2017

Outra maneira (dependendo da quantidade de dados) é fazer inteiramente com JavaScript...

<!DOCTYPE HTML>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

<p>Filtro por Nome:</p>
<p style="margin-bottom: 5px;">Nome:</p>
<input type="text" name="nome" id="nomeDaEmpresa" placeholder="Informe o nome da Empresa"/>


	
<hr />
<h3>Dados:</h3>		
<table style="width: 100%;text-align: left;">
	<thead>
		<tr>
			<th>Nome da Empresa</th>
			<th>Status</th>
		</tr>
	</thead>
	<tbody id="dados">
	
	</tbody>

</table>



<script type="text/javascript">	
	var dados = [
		{
		  "Nome": "Carrefour",
		  "Status": true
		}
		,{
		  "Nome": "Pão de Açucar",
		  "Status": false
		}
		,{
		  "Nome": "Extra",
		  "Status": true
		}
		,{
		  "Nome": "WallMart",
		  "Status": true
		}
	];
	
	document.getElementById("nomeDaEmpresa").addEventListener("keyup", function() {
		
		var dadosCopy = dados.slice();
		const filterNome = this.value;
		
		
		var i = dadosCopy.length;
		while (i--) {
		
			var myRegex = new RegExp(filterNome, 'gi');			
			if(dadosCopy[i]['Nome'].match(myRegex) ==  null){
				dadosCopy.splice(i, 1); // Remove o elemento
			}
		}		
		
		popDados(dadosCopy);
	});	
	
	
	function popDados(myArr){
		var dadosTable = document.getElementById("dados");
		while (dadosTable.firstChild) {
			dadosTable.removeChild(dadosTable.firstChild);
		}
		
		for(var x = 0; x < myArr.length; x++){
			var trTable = document.createElement('tr');
			trTable.innerHTML = '<td>'+  myArr[x]['Nome'] +'</td>' + '<td>'+ myArr[x]['Status'] +'</td>';			 
			
			document.getElementById("dados").appendChild(trTable);
		}
	}
	
	//Logo ao iniciar o DOM
	popDados(dados);
</script>
</body>
</html>

https://fiddle.jshell.net/7Ldt3x7a/

Ps:

Qualquer semelhança com 'filter' do Angular é mera coincidência

Entrar

Arquivado

Sistema de busca sem refresh php

Pergunta

marlone 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

2 respostas a esta questão

Recommended Posts

ViniciusPuttiMorais 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabrieldarezzo 255

Compartilhar este post

Link para o post

Compartilhar em outros sites

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Consulta sem duplicação

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante