How to make a field of a clickable table?

Question

How to make a field of a clickable table?

Navigation

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

1

I'm doing a project where when I click on employees it opens a page with the listing of employees as you can see in the photo. I need the name of each employee to be clickable, to be able to later open the complete page of the official with all other fields (address, birth date, etc.).

Here'swhatI'vetriedsofar(javascriptcodeandphp/html):

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>

php javascript html table

asked by anonymous 30.06.2017 / 13:49

3 answers

How to save a file in JavaFX or Java? Error reading file

score 1 · Answer 1

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

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><tableid="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>

See running on JsFiddle .

score 0 · Answer 2

If you want to leave only the name clickable, the simplest would be to insert the tag into 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>";

score 0 · Answer 3

There is a JQuery plugin called datatables . It is a very flexible tool to work with tables.

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

Note the line "ajax": "../ajax/data/objects.txt" you will have the option of passing a file where ajax will fetch the data to mount the table. Create a .php file and inside it create the database query. Bring the information in the same table structure and apply a json_encode to 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 that you should pay attention to is when passing the fields from data to datatbles:

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

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

If you still have more questions, just comment.