Get the id and value of a row by clicking the button
<p>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.</p>

<p>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.</p>

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

<p>Images: <a href="https://i.stack.imgur.com/4y7Y5.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4y7Y5.jpg" alt="enter image description here"></a>
<a href="https://i.stack.imgur.com/A5ojO.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A5ojO.jpg" alt="enter image description here"></a></p>

<p>My javascript code:</p>

<pre><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( '&lt;span class="ui green  label"&gt;Conectado&lt;/span&gt;' ); 
  }
  if ( aData[2] == "false") {
    $('td:eq(2)', nRow).html( '&lt;span class="ui red label"&gt;Desconectado&lt;/span&gt;' ); 
  }
  if ( aData[1] == "true") {
    $('td:eq(1)', nRow).html( '&lt;span class="ui red label"&gt;Bloqueado&lt;/span&gt;'  ); 
  }
  if ( aData[1] == "false") {
    $('td:eq(1)', nRow).html( '&lt;span class="ui green  label"&gt;Desbloqueado&lt;/span&gt;' ); 
    }


},
"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": "&lt;i class='notched circle loading icon'&gt;&lt;/i&gt; 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 "&lt;button class='ui icon button' data-toggle='modal' data-target='#myModal' onclick='teste()'&gt;&lt;i class='options icon'&gt;&lt;/i&gt;&lt;/button&gt;";  
      }
  }            
  ]     
  });


  });
  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
                  }
              }]
          }
      }
  });
}
  });
 }
</code></pre>

<p>My html:</p>

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

  &lt;/tbody&gt;
  &lt;tfoot&gt;

      &lt;th&gt;Chave&lt;/th&gt;
      &lt;th&gt;Bloqueio&lt;/th&gt;
      &lt;th&gt;Conexão&lt;/th&gt;
      &lt;th&gt;Ação&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/tfoot&gt;
&lt;/table&gt;

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

<p></p>