1

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:

inserir a descrição da imagem aqui

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>';
                    }
                }]
9
  • Tem várias abordagens que podem variar conforme o seu html. Poste o html completo da tabela para que possamos analisar mais assertivamente. 24/08/2017 às 15:20
  • É só isso de html, só o da tabela @DiegoMarques
    – user88879
    24/08/2017 às 15:20
  • Eu digo de umas tr do tboddy 24/08/2017 às 15:23
  • @DiegoMarques, veja a edição se te ajuda
    – user88879
    24/08/2017 às 15:26
  • Alguma ajuda gente?
    – user88879
    24/08/2017 às 16:28

2 Respostas 2

1

Para fazer isso, você precisará atribuir sua tabela datatables à uma variável:

var datatable = $("#minhaTabela").DataTable({...});

Quando você clicar no terceiro ícone:

datatable.on('click', '#disableCompany', function(e){
e.preventDefault();

// Aqui, estou atribuindo à variável row literalmente a linha inteira.
var row = $(this).closest('tr'),
    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'
    });

    // Neste ponto, estou dizendo que quero adicionar um pouco de HTML
    // na primeira td (coluna) na linha específicada (row).           
    $("td:eq(0)", row).html("O HTML que criará sua bolinha verde/vermelha");
    });      
});

Observação: Eu estou atribuindo sua tabela à variável datatable, porquê assim você terá acesso à inúmeros métodos que a API desse plugin oferece, por exemplo: datatable.row("colocar a variável row").data(); recuperará os valores de todas as colunas da linha especificada.

0

Se entendi bem, esse seu código irá modificar todos os atributos data-id da linha onde o botão foi clicado para 1 ou 0 de acordo com o valor atual.

No final, você pode alterar a class ou html do círculo.

$("input").on("click", function(){
	valor = $(this).attr("data-id");
	valor == "1" ? (nvalor = "0", nClasse = "vermelho") : (nvalor = "1", nClasse = "verde");
	linha = $(this).closest('tr');
	linha
	.find($('[data-id="'+valor+'"]'))
	.attr("data-id",nvalor);
	linha
	.find("span") //Considerando que a bolinha é um SPAN
	.first()
	.html(nClasse);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" cellpadding="5" border="1">
	<tr>
    	<td>
        	<span>vermelho</span>
        </td>
    	<td>
        	<div data-id="0">bla bla</div>
        </td>
    	<td>
        	<input data-id="0" type="button" value="Clique" />
        </td>
    </tr>
	<tr>
    	<td>
        	<span>verde</span>
        </td>
    	<td>
        	<div data-id="1">bla bla</div>
        </td>
    	<td>
        	<input data-id="1" type="button" value="Clique" />
        </td>
    </tr>
</table>

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .