Get the id and value of a row by clicking the button

Question

I have a table from DataTable plugin where the data is received by server-side. In this table I have a column has a button that when clicked opens a modal. And in this modal I want to display some information like name, bytes received, bytes sent, etc.

I need to get the name(value) of first td, because from that name will do select in the mysql and catch the data and display this modal.

The way I tried "$(this).closets(tr) and first td", when I used alert () did not display any information in the pop -up .

Images:

My javascript code:

$(document).ready(function() {
var table = $('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": 'ajax.php',
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
  if ( aData[2] == "true") {
    $('td:eq(2)', nRow).html( '<span class="ui green  label">Conectado</span>' ); 
  }
  if ( aData[2] == "false") {
    $('td:eq(2)', nRow).html( '<span class="ui red label">Desconectado</span>' ); 
  }
  if ( aData[1] == "true") {
    $('td:eq(1)', nRow).html( '<span class="ui red label">Bloqueado</span>'  ); 
  }
  if ( aData[1] == "false") {
    $('td:eq(1)', nRow).html( '<span class="ui green  label">Desbloqueado</span>' ); 
    }


},
"lengthMenu": [5, 10, 20, 25],
"language": {
  "search": "Busca rápida:",
  "emptyTable": "Desculpe, não há nada para mostrar.",
  "info": "Registro _START_ até _END_ de _TOTAL_ registros",
  "infoEmpty": "Nada foi encontrado em ",
  "infoFiltered": "um total de _MAX_ registros.",
  "lengthMenu": "Exibir _MENU_ registros",
  "processing": "<i class='notched circle loading icon'></i> Processando",
  "zeroRecords": "Desculpe, nada foi encontrado.",
  "paginate": {
    "first": "Primeiro",
    "last": "Último",
    "next": "Próximo",
    "previous": "Anterior"
  }
},
"columnDefs": [
  { 
      "targets": 3,
      "render": function(data, type, row, meta){
         return "<button class='ui icon button' data-toggle='modal' data-target='#myModal' onclick='teste()'><i class='options icon'></i></button>";  
      }
  }            
  ]     
  });


  });
  function teste() {
  $('.ui.modal')
  .modal({ detachable:false, observeChanges:true         }).modal('show').modal('refresh');
  }

    function myFunction() {

    $.ajax({
    url: 'api.php',
    type: 'POST',
    success: function(datas){
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
          labels: ["Desconexão", "Conexão"],
          datasets: [{
              label: '# Quantidade',
              data: [datas[1], datas[3]],
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                  'rgba(255,99,132,1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 1
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero:true
                  }
              }]
          }
      }
  });
}
  });
 }

My html:

  <div class="panel-body">
<table class="ui small table" id="example">
  <thead>
    <tr>
      <th>Chave</th>
      <th>Bloqueio</th>
      <th>Conexão</th>
      <th>Ação</th>
    </tr>
  </thead>
  <tbody>

  </tbody>
  <tfoot>

      <th>Chave</th>
      <th>Bloqueio</th>
      <th>Conexão</th>
      <th>Ação</th>
    </tr>
  </tfoot>
</table>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel"></h4>
      </div>
      <div class="modal-body">
        <!-- <canvas id="myChart" width="400" height="400"></canvas> -->
        <div class="row">
        <div class="col-md-5"><canvas id="myChart" width="400" height="400"></canvas></div>
        <div class="col-sm-3"><h4>Name: </h4> <h4>Bytes Received:</h4><h4>Bytes Sent:</h4><h4>Real Address</h4><h4>Virtual Address</h4></div>
      </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 1

I would advise to you not trying to find info in somewhere else like it rendered table that holds the button, but to render button with all needed info.

Look, you have template for the button:

"render": function(data, type, row, meta){
         return "<button class='ui icon button' data-toggle='modal' data-target='#myModal' onclick='teste()'><i class='options icon'></i></button>";  
      }

as you can see you have all needed information in the function, so you can render it as attributes, like this:

"render": function(data, type, row, meta){
             return "<button class='ui icon button js-modal-btn' data-chave="+ row[0] +"><i class='options icon'></i></button>";  
          }

now, as you can see, button has an attribute, that holds value from row variable, I assumed that its an array and first element is what you need. (If you are not sure, the just make a console.log(row) in render function.

Now you can use varible on your click handle:

$(document).on('click', '.js-modal-btn', function(){

   var $this = $(this);
   var firstColumnName = $this.attr('data-chave');

   //go on
})

And pls dont use onclick inline handles.