How to make a field from a clickable table?

Question

I’m doing a project where when I click on employees, it opens a page with a list of employees as you can see in the photo. I need the name of each employee to be clickable, so that later, I can open in another page the full employee form with all other fields (address, date of birth etc).

Here’s what I’ve tried so far (javascript and php/html code):

jQuery(document).ready(function($) {
$(".clickable-row").click(function() {
    window.location = $(this).data("href");
});
});

<div class="table-responsive">
                    <?php 
                        if (mysqli_num_rows($result) >0)
                        {
                            echo "<table border='1' class='table table-bordered width='100%' id='dataTable' cellspacing='0'>";
                            echo "<tr><th>Nome Trabalhador</th><th>Função</th><th>ID Trabalhador</th></tr>";

                            while ($row = mysqli_fetch_array ($result))
                            {                                   
                                echo "<tr class='clickable-row' data-href='http://listar_funcionarios.php?id=" .  $row['id_trabalhador'] . "/'>";
                                echo "<td>" . $row['nomeTrabalhador'] ."</td>";
                                echo "<td>" . $row['funcao'] ."</td>";
                                echo "<td>" . $row['id_trabalhador']."</td>";
                                echo "</tr>";
                            }
                            echo "</table>";
                            }
                            else
                            {
                                echo "No results to display!";
                            }
                            mysqli_close($link);
                    ?>
</div>

Answer 1

Using jQuery you can use the method window.location.replace($(this).data('href')).

See an example of how it works:

$(".rows").click(
  function(e){
    alert($(this).data('href'));
    window.location.replace($(this).data('href'));
    return false;
  }
)

table tr {
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableSelector">
  <thead>
    <tr>
      <th>ID</th>
      <th>Actor</th>
    </tr>
  </thead>
  <tbody>
    <tr class="rows" data-href="http://google.com/1">
      <th>1</th>
      <td>Jon Snow</td>
    </tr>
    <tr class="rows"  data-href="http://google.com/2">
      <th>2</th>
      <td>Sansa Stark</td>
    </tr>
    <tr class="rows"  data-href="http://google.com/3">
      <th>3</th>
      <td>Arya Stark</td>
    </tr>
    <tr class="rows"  data-href="http://google.com/4">
      <th>4</th>
      <td>Eddard Stark</td>
    </tr>
  </tbody>
</table>

Behold running on Jsfiddle.

Answer 2

If you want to leave clickable only the name, the simplest would be to insert the tag a in it.

echo "<tr>";
echo "<td><a href='http://listar_funcionarios.php?id=" . $row['id_trabalhador'] . ">" . $row['nomeTrabalhador'] ."</a></td>";
echo "<td>" . $row['funcao'] ."</td>";
echo "<td>" . $row['id_trabalhador']."</td>";
echo "</tr>";

Answer 3

There is a plugin for Jquery called datatables. It is a very flexible tool for working with tables.

The datatables already have a solution to your problem here. This link shows an example containing the complete codes. I believe that the most complex part that will have to develop will be the requisition part AJAX.

Look at the line "ajax": "../ajax/data/objects.txt" you will have the option to pass a file where the ajax will search the data to mount the table. Create a file .php and within it create the database query. Bring the information in the same table structure and apply a json_encode in the result, for example:

$funconarios['data'] = [];    
if (mysqli_num_rows($result) > 0)  {
     while ($row = mysqli_fetch_array ($result)) {
         array_push($funcionarios['data'],
            [
                'id' => $row['id_trabalhador'],
                'nome' => $row['nomeTrabalhador'],
                'funcao' =>  $row['funcao'],
                /* outros campos */
                'endereco' => $row['funcao'],
                'data_nasc' => $row['funcao'],
                
            ]
        );
     }
     
     echo json_encode($funconarios);
        
}

//Saída do json_enconde
// {
//   "data": [
//         {
//           "id": "1",
//           "name": "Fulano da Silva",
//           "funcao": "Almoxarife",
//           "endereco": "Rua qualquer, 23, Bairo: Tal - Cidade/UF",
//           "data_nasc": "2011/04/22"
//         },
//         {
//           "id": "2",
//           "name": "Cilano da Silva",
//           "funcao": "Secretario",
//           "endereco": "Rua qualquer, 23, Bairo: Tal - Cidade/UF",
//           "data_nasc": "2011/04/22"
//         },
//     ]
// }

Another point you should pay attention to is the time to pass the fields of data for the datatbles:

{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "salary" }

Must be in the same order and with the same array definition $funcionarios['data'].

If you still have more questions, just comment.