Change the table row icon when clicking dynamically?

Question

Change the table row icon when clicking dynamically?

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

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 in the last <th> there are control buttons that serve for basic CRUD, view, change, delete, create, throughout this table.

Here is an image of a piece of the table:

AndIhaveafunctionthatIexecutewhenIclickthethirdicon(#disableCompany),tomakeachangeinthedatabase:

$(document).on('click','#disableCompany',function(e){e.preventDefault();varuid=$(this).data('id');$.ajax({url:'disableCompany.php',type:'POST',data:{id:uid},dataType:'html'}).done(function(){$.gritter.add({title:'<iclass="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 it will get be seen to change . Can not reload () update dynamically ?

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

javascript ajax

asked by anonymous 24.08.2017 / 17:14

2 answers

Error With Connection in Bank phpMyAdmim (New Code) Nothing is solving [duplicate] Take only part of the input content without submitting [duplicate]

score 1 · Answer 1

To do this, you need to assign your table datatables 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");
    });      
});

Comment : I'm assigning your table to the datatable variable, so you'll have access to the many methods that the plugin API offers, for example: datatable.row("colocar a variável row").data(); will retrieve all columns of the specified line.

score 0 · Answer 2

If I understand correctly, this code 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 of the 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><tablewidth="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>