Tenho uma estrutura de tabela da seguinte maneira:
<table id="example" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th></th>
<th>Razão Social</th>
<th>CNPJ</th>
<th>CEP</th>
<th>Rua</th>
<th>Cidade</th>
<th>Bairro</th>
<th></th>
</tr>
</thead>
</table>
E na última <th>
existem botões de controle que servem para CRUD básico, visualizar, alterar, excluir, criar, em toda essa tabela.
Segue uma imagem de um pedaço da tabela:
E tenho uma função que eu executo quando eu clico no terceiro ícone (#disableCompany), para fazer uma alteração no banco:
$(document).on('click', '#disableCompany', function(e){
e.preventDefault();
var uid = $(this).data('id');
$.ajax({
url: 'disableCompany.php',
type: 'POST',
data: {id: uid},
dataType: 'html'
}).done(function() {
$.gritter.add({
title: '<i class="fa fa-exclamation-circle" aria-hidden="true"></i> Empresa desativada com sucesso!',
text: 'A empresa selecionada foi desativada com sucesso! Ela não terá mais acesso ao sistema até que você reative-a novamente.',
class_name: 'gritter-info'
});
setTimeout(function(){
window.location.reload();
}, 5000);
});
});
Se o status (1 coluna) for vermelha (igual a 0, no atributo data-id), vou enviar para o script PHP e então irá ativar (colocar status 1) e somente quando eu recarregar a página conseguirá ser vista a alteração. Não tem como no lugar de reload() atualizar dinamicamente?
O código da última <tr>
como foi pedido:
"columnDefs": [
{
"targets": 7,
"data": "",
"render": function (data, type, full) {
return '<a data-toggle="modal" data-target="#infoModal" data-id="' + full[7] + '" id="getCompany" class="blue"><i class="ace-icon fa fa-search-plus bigger-130"></i></a> <a class="red" href="deleteCompany.php?id_Company=' + full[7] + '"><i class="ace-icon fa fa-trash-o bigger-130"></i></a> <a class="orange" data-id="' + full[7] + '" id="disableCompany"><i class="ace-icon fa fa-eye-slash bigger-130"></i></a>';
}
}]