Como faço para atualizar uma tabela HTML via Jquery ajax .
1,180 views
Skip to first unread message
Johnatan Dantas
Aug 7, 2014, 4:38:54 PM8/7/14
to jque...@googlegroups.com
Olá galera, meu problema é o seguinte, eu tenho uma pagina jsp com filtros de busca e quando eu faço a busca ela atualiza a minha tabela, só que essa maneira que eu estou fazendo é meio hardcore, o código se encontra logo a baixo. Gostaria de saber se existe uma maneira mais elegante de fazer as minhas tabelas no próprio html utilizando
jstl e quando eu fazer a busca ela só atualizar com os novos valores. Os dados já vem via JSON.
Posso aceitar novas sugestões.
jstl e quando eu fazer a busca ela só atualizar com os novos valores. Os dados já vem via JSON.
Posso aceitar novas sugestões.
<body>
<input id="IDInputNumeroOSBusca" type="text" placeholder="Número OS" class="span2">
<button type="submit" class="btn" onclick="busca()" >Busca</button>
<table id="tabelaOrdemServico" class="table table-condensed">
<thead></thead>
<tbody></tbody>
</table>
<div class="pagination pagination-centered" >
<div id="page-selectiona"></div>
</div>
<script type="text/javascript">
var qtdPaginas = ${qtdPaginas}
function busca(num) {
var parametros = {
'ordemServico.id': $('#IDInputNumeroOSBusca').val(),
'ordemServico.numeroOSHub': $('#IDInputNumeroOSHubBusca').val(),
'ordemServico.idBanco': $('#IDInputIdBancoBusca').val(),
'ordemServico.agencia.numero': $('#IDInputAgenciaBusca').val(),
'ordemServico.clienteVisitado.cnpjCpf': $('#IDInputCNPJBusca').val(),
'ordemServico.clienteVisitado.razaoSocial': $('#IDInputClienteBusca').val(),
'ordemServico.status': $('#IDInputStatusBusca').val(),
'paginaClicada': num
};
$.ajax({
url: '/msigosbv/buscar',
data: parametros,
dataType: 'json',
contentType: 'application/json',
type: "GET",
success: function (data) {
$('#tabelaOrdemServico > thead').empty();
$("#tabelaOrdemServico > tbody").empty();
var result = data.ordensServicos;
$("#tabelaOrdemServico > thead").append(
"<tr>" +
"<th> N° OS </th>" +
"<th>N° OS HUB</th>" +
"<th>IDBANCO</th>" +
"<th>SERVIÇO</th>" +
"<th>CLIENTE</th>" +
"<th>CNPJ</th>" +
"<th>AGÊNCIA</th>" +
"<th>STATUS OS</th>" +
"</tr>"
);
for (var it = 0; it < result.length; it++) {
$("#tabelaOrdemServico > tbody").append(
"<tr>" +
" <td>" + result[it].id + "</td>" +
" <td>" + result[it].numeroOSHub + "</td>" +
" <td>" + result[it].idBanco + "</td>" +
" <td>" + result[it].nomeServico + "</td>" +
" <td>" + result[it].razaoSocial + "</td>" +
" <td>" + result[it].cnpj + "</td>" +
" <td>" + result[it].numeroAgencia + "</td>" +
" <td>" + result[it].statusOS + "</td>" +
"</tr>"
);
}
buscaQtdPagina(result);
},
error : function(jqXHR, textStatus, errorThrown) {
alert('erro');
alert(errorThrown);
alert(textStatus);
alert(jqXHR);
},
});
}
var i = 1;
function buscaQtdPagina(result){
$('#page-selectiona').bootpag({
total:qtdPaginas,
maxVisible: 10
}).on('page', function(event, num){
if(i != num){
busca(num);
}
i = num;
});
}
</script>
</body>
Márcio Passos
Aug 7, 2014, 9:45:52 PM8/7/14
to jque...@googlegroups.com
--
--
Grupo de jQuery Brasil.
REGRAS: https://docs.google.com/document/d/1VfvTDmeHTSj-L5ouZJjQQ4OkjTCU1Hr2XtPYBNGVHH4/edit
USE O JSBIN.COM / JSFIDDLE.NET PARA CÓDIGOS.
Email: jque...@googlegroups.com
Biba: jquery-br+...@googlegroups.com
Site: http://groups.google.com/group/jquery-br?hl=pt-BR
---
Você recebeu essa mensagem porque está inscrito no grupo quot;jQuery (Brasil)" dos Grupos do Google.
Para cancelar inscrição nesse grupo e parar de receber e-mails dele, envie um e-mail para jquery-br+...@googlegroups.com.
Para mais opções, acesse https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages