Change the table row icon when you click dynamically?

Question

I have a table structure as follows:

<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>

And the last <th> there are control buttons that serve for basic CRUD, view, change, delete, create, across this table.

Here is a picture of a piece of the table:

And I have a function that I run when I click on the third icon (#disableCompany), to make a change in the bank:

$(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);
                    });      
                });

If the status (1 column) is red (equal to 0, in the data-id attribute), I will send it to the PHP script and then activate (put status 1) and only when I reload the page will the change be seen. There is no way in place of Reload() dynamically update?

The code of the last <tr>as requested:

"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>';
                    }
                }]

Answer 1

To do this, you will need to assign your datatables table to a variable:

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

When you click on the third icon:

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");
    });      
});

Observing: I am assigning your table to the variable datatable, why then you will have access to the numerous methods that the API of this plugin offers, for example: datatable.row("colocar a variável row").data(); recover the values of all columns of the specified row.

Answer 2

If I understand correctly, this code of yours will modify all attributes data-id of the line where the button was clicked to 1 or 0 according to the current value.

At the end, you can change the class or html circle.

$("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>