I own a search page made in ASP.NET MVC that has data loaded into a table using AJAX and jQuery Template, so you do not need to reload the page after searching. Here's the example below:
function CarregaTabela() {
idFiltro = $("#idFiltro").val();
pesquisa = $("#campoPesquisa").val();
var url = "http://servidorTeste/api/precos/";
$.ajax({
url: url,
type: "POST",
data: {
"idLoja": $("#idLoja").val(),
"idFiltro": idFiltro,
"Pesquisa": pesquisa,
"TotalProdutos": $("#TotalProdutos").val()
},
success: function (retorno) {
if (retorno.mensagemErro == null) {
//Aqui vai pra tabela de genéricos
if (retorno.listaPrecos.length > 0) {
$.notify(retorno.listaPrecos.length + " Produtos encontrados.");
//Oculto a tabela de genéricos.
$("#tabelaProdutos").hide();
//Removo todos os tr filhos do tbody
$("#corpoProdutos tr").remove();
//Oculto a tabela de genéricos.
$("#tabelaEquivalentes").hide();
//Removo todos os tr filhos do tbody
$("#corpoEquivalentes tr").remove();
//Foreach
$.each(retorno.listaPrecos, function (i, item) {
//Formando o preço no formato 00.00
item.descontoPercentagemStandard = CalcularPercentagem(item.Referencia, item.Standard).toFixed(2);
item.descontoPercentagemPreferencial = CalcularPercentagem(item.Referencia, item.Preferencial).toFixed(2);
item.descontoPercentagemAposentado = CalcularPercentagem(item.Referencia, item.Aposentado).toFixed(2);
item.descontoPercentagemMedico = CalcularPercentagem(item.Referencia, item.Medico).toFixed(2);
item.PercentagemPMC *= 100;
item.PercentagemPMC = item.PercentagemPMC.toFixed(2);
item.Referencia = item.Referencia.toFixed(2);
item.Standard = item.Standard.toFixed(2);
item.Preferencial = item.Preferencial.toFixed(2);
item.Aposentado = item.Aposentado.toFixed(2);
item.Medico = item.Medico.toFixed(2);
if (item.Condicao == "VENDA") {
item.Valor = item.Standard - item.VmsPDV;
item.Valor = item.Valor.toFixed(2);
}
});
//Adiciono todos os items a tabela de produtos.
$("#tmplProdutos").tmpl(retorno.listaPrecos).appendTo("#corpoProdutos");
$("#tabelaProdutos").show();
else {
$.notify(retorno.listaPrecos.length + " Produtos encontrados.");
//Oculto a tabela de genéricos.
$("#tabelaProdutos").hide();
//Removo todos os tr filhos do tbody
$("#corpoProdutos tr").remove();
}
}
}
else {
$("#tabelaProdutos").hide();
$.notify(retorno.mensagemErro, { status: "danger" });
}
},
error: function () {
bootbox.alert("Falha ao pesquisar produtos.");
},
complete: function () {
loading.stop();
}
});
};
Recently I've implemented jQuery Datatable on this search page. The first search works well, but from the second on, in addition to displaying all the search (which should only appear 10 items at a time), when I will filter in the search bar in all the columns it shows the search data above.
Remembering that the Datatable is initialized along with the page, but data is reloaded with each search by searching.
Could anyone help me?