[Resolvido] Como fazer uma tabela dinamica PHP, MYSQL e JQUERY

[Freisleben 0]

Ola Amigos,

 

Conforme pode ver na imagem abaixo, tenho uma tabela que traz as informações dos usuários cadastrado e através do jquery abro um formulário para cadastrar novos usuário, o que eu quero fazer é quando cadastrar um novo usuário os dados do novo usuário seja carregado para a tabela sem o famoso "refresh" na tela.

 

 

Mais não sei como fazer isso com jquery. Alguem tem um exemplo que como posso fazer isso, ou alguma ideia de como fazer?

[Freisleben 0]

Então, não sei como faço para carregar os dados que foram inseridos com jquery?

 

No codigo abaixo passo os dados do formulario atraves do jquery e insiro no banco, agora não sei como faço para retornar os dados do banco com jquery e popular uma <table> (tabela html).

 

$(document).ready(function (){
	
	$("#btn").click(function(){
		
		$("#usuario").validate({
			
			rules:{
				nomeCompl:{
					required: true
					},
				email:{
					required: true, 
					email: true
					},
				perfil:{
					required: true
					},
				login:{
					 required: true, minlength: 5 
					},
				senha:{
					 required: true, minlength: 5 
					}
				},
			messages:{
				nomeCompl:{
					required: "*Campo Obrigatorio"
					},
				email:{
					required: "*Campo Obrigatorio", 
					email: "Digite um e-mail v�lido"
					},
				perfil:{
					required: "*Campo Obrigatorio"			
					},
				login:{
					required: "*Campo Obrigatorio",
          minlength: "O seu Login deve conter, no m�nimo, 5 caracteres"
					},
				senha:{
					required: "*Campo Obrigatorio",
          minlength: "O seu Senha deve conter, no m�nimo, 5 caracteres"
					}
				},
				
				submitHandler: function(form){
					var nomeCompl = $("#nomeCompl").val();
					var email = $("#email").val();
					var perfil = $("#perfil").val();
					var login = $("#login").val();
					var senha = $("#senha").val();
					
					$.post("admin/usuario.php",
						{
							nomeCompl: nomeCompl,
							email: email,
							perfil: perfil,
							login: login,
							senha: senha						
						}, function(data){
							
							//$("#resposta").html(data);
								
								alert(data);
								$("#usuario")[0].reset();
							
							}, "html");
					
					}
			 							
			});
						
		});
	
	});

[William Bruno 1501]

dispare um $.ajax() qndo clicar no 'Close', que vá em algum script php, refaça a consulta, e jogue o resultado da tabela, onde está a tabela.

 

o retorno deve ser o html da tabela completa.

[Freisleben 0]

Willian,

 

Isso ai, mais não sei como retornar um HTML da table completa. Você alguma ideia de como retornar?

[William Bruno 1501]

cara, não tem 'dificuldade' nisso...

 

faz lá o arquivo php, que retorne (dê echo), na tabela completa.

e somente isso.

 

um arquivo:

retorna_tabela.php

 

que qndo chamado, via GET ou POST, faça a consulta no banco, e dê echo na tela da tabela completa.

 

feito isso, não tem segredo.

basta, no success da $.ajax(), direcionar:

 

success: function( data )
{
       $("#container").html( data );//colocando a tabela retornada no id="container"
}

[Freisleben 0]

Ola willian,

 

Consegui fazer com a função .load $("#tabela").load("listaUsuario.php");, mas não gostaria de sempre carregar toda tabela. Teria alguma forma de carregar ou adicionar somente o usuário que esta sendo cadastro?

 

obrigado pelo apoio.

diego.

[William Bruno 1501]

sim, faça o teu script php, devolver apenas o ultimo cadastrado, e então você dá um .append() na tabela.

 

não use o .load() para isso. Tem outras funções melhores, como a que indiquei acima.

[Freisleben 0]

Não entendi como faria para jogar os dados (variavel com o valor) no .append(). poderia me explicar?

 

obrigado.

diego

[William Bruno 1501]

success: function( data )
{
       $("#container").append( data );//colocando a tabela retornada no id="container"
}

sendo que o teu script php deve devolver apenas os ultimos dados inseridos.

entendeu? a grande logica está no php.

[Freisleben 0]

Willian,

 

Muito obrigado funcionou, te devo essa. Se for de SP pago uma cerveja!! rs..rs..rs

 

E não abusando olha só como estou fazendo.

 

Arquivo php que recebo dos dados vindo do formulário atraves do jquery $.post.

 

<?php
/* recebe os dados do formulario */

$nome = $_POST['nomeCompl'];
$email = $_POST['email'];
$perfil = $_POST['perfil'];
$login = $_POST['login'];
$senha = $_POST['senha'];

include 'lib/Bd.php';
$bd = new Bd();
$bd->connect();
$bd->selectBd();

$select = "SELECT * FROM tb_usuario WHERE email = '$email' AND ativo = 1";
$query = mysql_query($select) or die ("Erro ao consultar o usuário no Banco ". mysql_error());;

$rows = mysql_num_rows($query);

if($rows == 0){
	
$insert = "INSERT INTO tb_usuario (usuario, email, login, senha, id_perfil, ativo)
VALUES ('$nome','$email','$login', '$senha', '$perfil', 1)";	
$query = mysql_query($insert) or die ("Erro ao Cadastrar o usuário no Banco ". mysql_error());;
	

$select = "SELECT * FROM tb_usuario ORDER BY id_usuario DESC LIMIT 1";
$query = mysql_query($select) or die ("Erro ao Listar os Usuários ".mysql_error());
While ($ln = mysql_fetch_array($query)){
	$nome   = $ln['usuario'];
	$perfil = $ln['id_perfil'];
	$login  = $ln['login'];
echo "
        <tr class=\"odd\">
            <td>
                $nome
            </td>
            <td>
                $perfil
            </td>
            <td>
                $login
            </td>
            <td>
                Editar | Excluir 
            </td>
        </tr>\n";
}
    
    
}else{
	echo "Usuário já cadastrado!";
}


?>

 

E o arquivo jquery que envio os dados do formulario via $.post e retorno o ultimo usuario cadastrado para inserir na tabela.

 

$(document).ready(function (){
	
	$("#btn").click(function(){
		
		$("#usuario").validate({
			
			rules:{
				nomeCompl:{
					required: true
					},
				email:{
					required: true, 
					email: true
					},
				perfil:{
					required: true
					},
				login:{
					 required: true, minlength: 5 
					},
				senha:{
					 required: true, minlength: 5 
					}
				},
			messages:{
				nomeCompl:{
					required: "*Campo Obrigatorio"
					},
				email:{
					required: "*Campo Obrigatorio", 
					email: "Digite um e-mail v�lido"
					},
				perfil:{
					required: "*Campo Obrigatorio"			
					},
				login:{
					required: "*Campo Obrigatorio",
          minlength: "O seu Login deve conter, no m�nimo, 5 caracteres"
					},
				senha:{
					required: "*Campo Obrigatorio",
          minlength: "O seu Senha deve conter, no m�nimo, 5 caracteres"
					}
				},
				
				submitHandler: function(form){
					var nomeCompl = $("#nomeCompl").val();
					var email = $("#email").val();
					var perfil = $("#perfil").val();
					var login = $("#login").val();
					var senha = $("#senha").val();
					
					$.post("usuario.php",
						{
							nomeCompl: nomeCompl,
							email: email,
							perfil: perfil,
							login: login,
							senha: senha						
						}, function(data){
							
								alert('Usuário Cadastrado');
								
								$("#usuario")[0].reset();
							   
								 $("#tabela").append( data );
								
								
								
							}, "html");
					
					}
			 							
			});
						
		});
	
	});

Teria uma forma mais organizada de eu fazer esse retorno do php. Tipo pois no mesmo arquivo que dou insert já faço o select. Acho que o codigo fica um pouco bagunçado!!!

 

Abraços William

[William Bruno 1501]

ah cara... oque daria para melhorar, seria tentar trabalhar com classes..

 

assim, esse arquivo da requisição, seria apenas uma espécie de Facade, para os metodos.. (só as chamadas estariam ai, a logica toda ficaria nas classes).

 

dá pra indentar melhor o script, e corrijir os acentos.. hehe

 

mas parabéns por ter conseguido!! ^_^

 

sou de sampa capital sim, me paga uma SODA Antártica (unica coisa com alcool que nao bebo é cerva) que tá tudo certo.