atualizar datatable com jquery e php
Boa tarde.
Duvida simples mas nao sei como fazer.
Preciso que ao selecionar o registro no grid e excluí-lo ou atualizar, ou inserir, o datatables atualize.
Está inserindo, editando excluindo perfeitamente no banco, porem o datatables nao atualiza, tenho q dar f5 na pagina.
Meu codigo para montar o datatables:
echo "<script type='text/javascript'>
$(document).ready(function() {
$('#tabelahorario').dataTable();
} );
</script>
<form id='formtabela' name='formtabela' method='post' >
<table id='tabelahorario' class='display' cellspacing='0' width='100'>
<thead>
<tr>
<th>Ordem</th>
<th>Codigo Profissional</th>
<th>Nome Profissional</th>
<th>Hora Inicial</th>
<th>Hora Final</th>
<th>Dia da Semana</th>
</tr>
</thead>
<tbody>";
while ($linha=mysql_fetch_array($resultado))
{
$codjor = ($linha["cod_jornada"]);
$nome = utf8_encode(($linha["nome_prof"]))." ".utf8_encode(($linha["sobrenome"]));
$codigo = ($linha["cod_profissional"]);
$hora_ini = substr($linha["hora_ini"],0,5);
$hora_fim = substr($linha["hora_fim"],0,5);
$dia_sem = utf8_encode(($linha["dia_sem"]));
echo"<tr>
<th>$codjor</th>
<th>$codigo</th>
<th>$nome</th>
<th>$hora_ini</th>
<th>$hora_fim</th>
<th>$dia_sem</th>
</tr>";
}
echo "</tbody>
</table>
</form>";
Meu codigo para selecionar no datatables:
echo "<script type='text/javascript'>
$(document).ready(function(){
$('#tabelahorario tbody').on('click', 'tr', function () {
var codjorn = $('th', this).eq(0).text();
var codprof = $('th', this).eq(1).text();
var horaini = $('th', this).eq(3).text();
var horafim = $('th', this).eq(4).text();
var diasem = $('th', this).eq(5).text();
$('#txtInvisivel').val(codjorn);
$('#selJorProf').val(codprof);
$('#selJorDia').val(diasem);
$('#selJorHoraEnt').val(horaini);
$('#selJorHoraSai').val(horafim);
$('#btnCadastrar').prop('disabled', true);
$('#btnAlterar').prop('disabled', false);
$('#btnExcluir').prop('disabled', false);
} );
});
</script>";
Meu codigo para excluir:
if (isset($_POST["btnExcluir"]))
{
if ($_POST["selJorProf"] == "")
{
echo "<script type='text/javascript'>
$(document).ready(function()
{
alert('Por favor Selecione Um Profissional.');
});
</script>";
}
else
{
//INSTANCIANDO UM NOVO OBJETO DO TIPO CONEXÃO
$c = new Conexao();
//CRIANDO O COMANDO SQL
$comandosql = "delete from jornada_trab where cod_prof = '".$_POST["selJorProf"]."' and dia_sem = '".$_POST["selJorDia"]."' ";
//REALIZANDO O COMANDO SQL
$c -> criarConsulta($comandosql);
//ATRIBUINDO O RESULTADO DO COMANDO A UMA VARIÁVEL
$resultado = $c -> criarConsulta($comandosql);
if ($resultado == 1)
{
echo "<script type='text/javascript'>
$(document).ready(function()
{
$('#tabelahorario').Close();
$('#tabelahorario').Open();
alert('Dados Excluidos com Sucesso.');
});
</script>";
}
}
}
Duvida simples mas nao sei como fazer.
Preciso que ao selecionar o registro no grid e excluí-lo ou atualizar, ou inserir, o datatables atualize.
Está inserindo, editando excluindo perfeitamente no banco, porem o datatables nao atualiza, tenho q dar f5 na pagina.
Meu codigo para montar o datatables:
echo "<script type='text/javascript'>
$(document).ready(function() {
$('#tabelahorario').dataTable();
} );
</script>
<form id='formtabela' name='formtabela' method='post' >
<table id='tabelahorario' class='display' cellspacing='0' width='100'>
<thead>
<tr>
<th>Ordem</th>
<th>Codigo Profissional</th>
<th>Nome Profissional</th>
<th>Hora Inicial</th>
<th>Hora Final</th>
<th>Dia da Semana</th>
</tr>
</thead>
<tbody>";
while ($linha=mysql_fetch_array($resultado))
{
$codjor = ($linha["cod_jornada"]);
$nome = utf8_encode(($linha["nome_prof"]))." ".utf8_encode(($linha["sobrenome"]));
$codigo = ($linha["cod_profissional"]);
$hora_ini = substr($linha["hora_ini"],0,5);
$hora_fim = substr($linha["hora_fim"],0,5);
$dia_sem = utf8_encode(($linha["dia_sem"]));
echo"<tr>
<th>$codjor</th>
<th>$codigo</th>
<th>$nome</th>
<th>$hora_ini</th>
<th>$hora_fim</th>
<th>$dia_sem</th>
</tr>";
}
echo "</tbody>
</table>
</form>";
Meu codigo para selecionar no datatables:
echo "<script type='text/javascript'>
$(document).ready(function(){
$('#tabelahorario tbody').on('click', 'tr', function () {
var codjorn = $('th', this).eq(0).text();
var codprof = $('th', this).eq(1).text();
var horaini = $('th', this).eq(3).text();
var horafim = $('th', this).eq(4).text();
var diasem = $('th', this).eq(5).text();
$('#txtInvisivel').val(codjorn);
$('#selJorProf').val(codprof);
$('#selJorDia').val(diasem);
$('#selJorHoraEnt').val(horaini);
$('#selJorHoraSai').val(horafim);
$('#btnCadastrar').prop('disabled', true);
$('#btnAlterar').prop('disabled', false);
$('#btnExcluir').prop('disabled', false);
} );
});
</script>";
Meu codigo para excluir:
if (isset($_POST["btnExcluir"]))
{
if ($_POST["selJorProf"] == "")
{
echo "<script type='text/javascript'>
$(document).ready(function()
{
alert('Por favor Selecione Um Profissional.');
});
</script>";
}
else
{
//INSTANCIANDO UM NOVO OBJETO DO TIPO CONEXÃO
$c = new Conexao();
//CRIANDO O COMANDO SQL
$comandosql = "delete from jornada_trab where cod_prof = '".$_POST["selJorProf"]."' and dia_sem = '".$_POST["selJorDia"]."' ";
//REALIZANDO O COMANDO SQL
$c -> criarConsulta($comandosql);
//ATRIBUINDO O RESULTADO DO COMANDO A UMA VARIÁVEL
$resultado = $c -> criarConsulta($comandosql);
if ($resultado == 1)
{
echo "<script type='text/javascript'>
$(document).ready(function()
{
$('#tabelahorario').Close();
$('#tabelahorario').Open();
alert('Dados Excluidos com Sucesso.');
});
</script>";
}
}
}
Manja
Curtidas 0
Melhor post
Fernando Blomer
17/10/2014
Micheli aqui eu faço assim:
Exemplo de um cadastro de usuarios
Datatable
JavaScript para Exclusão
Uso o componente bootbox para dar a mensagem de confirmação e caso seja confirmada a exclusão redireciono para a mesma página com o id a ser excluído.
No inicio da mesma página tenho o seguinte código:
onde verifico se existe informação para ser excluída caso sim chamo o método para a exclusão e dou um refresh.
não sei se isso te ajuda e/ou responde sua pergunta... caso de duvida é só avisar...
Exemplo de um cadastro de usuarios
Datatable
<table id="basicTable" class="table table-striped table-bordered responsive"> <thead class=""> <tr> <th>Nome</th> <th>E-mail</th> <th>Ações</th> </tr> </thead> <tbody> <?php for($i = 0; $i < $resultado['totalRegistros']; $i++){ echo"<tr> <td>".$resultado[$i]['nome']."</td> <td>".$resultado[$i]['email']."</td> <td> <a href='editar/".$resultado[$i]['id_usuario']."/'> <button class='btn btn-default tooltips' type='button' data-toggle='tooltip' title='' data-original-title='Editar'> <i class='fa fa-edit'></i> </button> </a> // JavaScript para Exclusão <a href='javascript:excluir(".$resultado[$i]['id_usuario'].")'> <button class='btn btn-danger tooltips' type='button' data-toggle='tooltip' title='' data-original-title='Excluir'> <i class='fa fa-trash-o'></i> </button> </a> </td> </tr>"; }?> </tbody> </table>
JavaScript para Exclusão
Uso o componente bootbox para dar a mensagem de confirmação e caso seja confirmada a exclusão redireciono para a mesma página com o id a ser excluído.
<script type="text/javascript"> function excluir(id) { bootbox.confirm("Você deseja realmente excluir esta informação?", function(result) { if(result) { window.location.href = id+'/'; } }); } </script>
No inicio da mesma página tenho o seguinte código:
include('class/dadosUsuario.class.php'); $class_dados = new dadosUsuario; $class_dados->dados(); if(isset($_GET['parametro1']) && $_GET['parametro1'] != ''){ $resultado = $class_dados->excluiDado($_GET['parametro1']); if(isset($resultado) && $resultado == ''){ $_SESSION['resultado'] = 'exclusao'; echo "<meta http-equiv='Refresh' content='0; url=../'>"; }elseif(isset($resultado) && $resultado == 'erro'){ $_SESSION['resultado'] = 'erro'; echo "<meta http-equiv='Refresh' content='0; url=../'>"; } } $resultado = $class_dados->imprimeDados();
onde verifico se existe informação para ser excluída caso sim chamo o método para a exclusão e dou um refresh.
não sei se isso te ajuda e/ou responde sua pergunta... caso de duvida é só avisar...
GOSTEI 1
Mais Respostas
Fernando Blomer
16/10/2014
Olá amigo, imagino que ReloadAjax pode te ajudar, porem nunca trabalhei com ele da uma olhada aqui.
GOSTEI 0
Ronaldo Lanhellas
16/10/2014
Você pode tentar colocar uma action no seu form:
Ou adicionar um redirecionamento para a mesma página depois da exclusão, atualização ou cadastro:
<form id='formtabela' name='formtabela' method='post' action='' >
Ou adicionar um redirecionamento para a mesma página depois da exclusão, atualização ou cadastro:
header("Location: http://www.yourwebsite.com/user.php");
GOSTEI 0
Manja
16/10/2014
Ronaldo:
o header da certo atualiza sim, porem ele nao me da a mensagem de exlcusao antes de resetar a pagina:
if ($resultado == 1)
{
echo "<script type='text/javascript'>
$(document).ready(function()
{
alert('Dados Excluidos com Sucesso.');
});
</script>";
//Esta pulando o pedaço acima.
header("Location: esqueleto-jornada.php");
}
o header da certo atualiza sim, porem ele nao me da a mensagem de exlcusao antes de resetar a pagina:
if ($resultado == 1)
{
echo "<script type='text/javascript'>
$(document).ready(function()
{
alert('Dados Excluidos com Sucesso.');
});
</script>";
//Esta pulando o pedaço acima.
header("Location: esqueleto-jornada.php");
}
GOSTEI 0
Manja
16/10/2014
Fernando, o Reload nem funciona....
nao sei se falta algo:
//1 para exclusao como exemplo:
if ($resultado == 1)
{
echo "<script type='text/javascript'>
$(document).ready(function()
{
var table = $('#tabelahorario').dataTable();
table.fnReloadAjax();
alert('Dados Excluidos com Sucesso.');
});
</script>";
}
nao sei se falta algo:
//1 para exclusao como exemplo:
if ($resultado == 1)
{
echo "<script type='text/javascript'>
$(document).ready(function()
{
var table = $('#tabelahorario').dataTable();
table.fnReloadAjax();
alert('Dados Excluidos com Sucesso.');
});
</script>";
}
GOSTEI 0
Wander Santos
16/10/2014
Esse datatable vc passa ele numa pagina so ou tem uma pagina e vc chma esse datatable com ajax dentro dessa pagina?
GOSTEI 0
Manja
16/10/2014
só separei codigo html em uma, e codigo php com jquery em outra.
GOSTEI 0
Wander Santos
16/10/2014
Tem como postar o cod?
GOSTEI 0
Manja
16/10/2014
Perfeito Fernando.
Na realidade vc separa por classses, deu pra entender bem como foi feito.
Fica muito legal.
Eu como estou iniciando ainda nao sei direito como fazer isso...é muita mistureira de codigo(uma hora vc usa jquery, outra php, outra css e outra html) pra quem vem de delphi.
Mas o codigo ajudou sim.
Ao inves do header, coloquei somente a linha window.location.href = 'esqueleto-jornada.php';
Funcionando e atualizando.
Obrigada.
Na realidade vc separa por classses, deu pra entender bem como foi feito.
Fica muito legal.
Eu como estou iniciando ainda nao sei direito como fazer isso...é muita mistureira de codigo(uma hora vc usa jquery, outra php, outra css e outra html) pra quem vem de delphi.
Mas o codigo ajudou sim.
Ao inves do header, coloquei somente a linha window.location.href = 'esqueleto-jornada.php';
Funcionando e atualizando.
Obrigada.
GOSTEI 0
Fernando Blomer
16/10/2014
Ehehehe... na verdade não sou nenhum expert tambem...
qualquer duvida estamos ai ;)
qualquer duvida estamos ai ;)
GOSTEI 0