How to see data from a table when clicking?

1

I was already investigating and everything and I can not find how to do it, I explain what I want to do ...

I have this table in PHP and MYSQL ...

<table>
<thead>
     ...
</thead>
<tbody class="buscar1">
    <?php
    include("XXXXXXX/conexion.php");
    $sql = "SELECT *,
            COUNT(no_pedido) as ped,
            SUM(cantidad),
            SUM(precio_venta)
            FROM tblpedido INNER JOIN tblusers
            WHERE status = 'EN PROCESO'
            AND tblpedido.id_usuario=tblusers.id
            GROUP BY no_pedido";
    $result=mysqli_query($conexion, $sql);
    while ($row=mysqli_fetch_array($result))
    {
    ?>
    <tr>
        <td style="text-align: center">
            <a href="" style="text-decoration: none;"> <!---- aqui quiero dar click ---->
            <i class="fas fa-eye fa-lg"></i> <?php echo $row['no_pedido']; ?>
            </a>
        </td>
        <td style="text-align: center"><?php echo $row['fecha_pedido1']; ?></td>
        <td style="text-align: center"><?php echo $row['SUM(cantidad)']; ?></td>
        <td style="text-align: center">$ <?php echo $row['SUM(precio_venta)']; ?> MXN</td>
                ...
    </tr>
    <?php 
    }
    $result->free();
    mysqli_close($conexion);
    ?>
</tbody>
</table>

By clicking on the order number1, show me in a modal all the details of the order1 or by clicking on the order number2, show me in a modal all the details of the order2 and if in succession if I had more orders.

The data that I want to show me in a table within the modal for example of order 1 or order2 in each case if I click are:

I do not know if I can explain myself thank you very much Greetings

    
asked by vickmt 16.03.2018 в 17:04
source

2 answers

0

Well, I would solve it using javascript, more specifically jQuery .

I would start by adding a class to the image on which you want to apply the event. For example, we will call this class 'npedido':

<td style="text-align: center">
    <a href="" style="text-decoration: none;" class='npedido'> 
    <i class="fas fa-eye fa-lg"></i> <?php echo $row['no_pedido']; ?>
    </a>
</td>

Afterwards you should work with jQuery events . In this case we will use the click ()

event
$('.npedido').on('click', function(){
    // Do something here
});

With this last thing we do is apply the click event to all the elements that contain the class 'npedido'.

Now comes the chicha. The next thing is to make an ajax server call to retrieve the data you want to show. Of this there is a lot of information, so I put several links that will be useful:

Example called asynchronous .ajax

jQuery .ajax documentation

The asynchronous call must be made within the click event, obviously.

Finally, we have to paint the result in a modal window. As there is also a lot of information on this, I attach some interesting links.

Modal Windows with jQuery UI

Modal windows only with css

Modal windows with javascript, html and css

As I said, there are a lot of information and examples on the network, I've only put three of them.

And with this I think that I do not have anything left, you would have all the necessary tools to be able to do what you want. I hope it serves you and do not hesitate to ask any questions.

    
answered by 16.03.2018 / 17:49
source
0

What you can do is that in the href of the link, you take the id of that order and pass it to another PHP or within it, to a variable:

<a href='my_php.php?mostrar=$dbId_producto'> //$dbId_producto es el identificador previamente obtenido al mostrar tu tabla de cada pedido.

Then you receive that Id and make the respective query query so that within a div well organized, you show the data of each order:

<?php
    $eId = $_GET['mostrar'];
    $db->preparar("SELECT no_pedido, id_producto, id_usuario, nombre_producto, unidad_producto, precio_venta, cantidad, fecha_pedido, fecha_pedido1, status FROM mytabla WHERE id_producto = ?");
    $db->prep()->bind_param('s', $eId);
?>

I hope I have helped you or give you an idea, it's just a matter of logic, and the rest is design:)

    
answered by 16.03.2018 в 17:47