Help with dynamic table

Question

Help with dynamic table

Navigation

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

1

I'm having a drawback of handling tables. I need to show data from two tables, which I already have stored in the database, the first is services, it shows the existing services and when I click on one of these services I need you to show me another table of materials that are required to perform this service , I really do not know how to do it, I'm new to web programming, I know this can be done with ajax, but I do not know how, if someone can give me an example, I think it could solve my drama.

Something similar to this is what I want to achieve:

Here is "Wall of 0.15"

Here is "Ceramic Floor"

javascript jquery html5 php ajax

asked by Diego Arce 20.10.2018 в 02:38

source

3 answers

1

Very good Diego Arce

There is a code that I use, which refers to the complete code, with what you are looking for.

Maybe this helps you link

You can use it using PHP, AJAX and JAVASCRIPT at the same time

answered by 21.10.2018 в 15:14

0

I do not know if my answer is very coarse and not very good, but with the little I know, I think you can add a <a href="#"></a> in the queries, where in the # you put a modal, for when you click on the modal leave the table you need, well, at least that's how I think you could do because the truth is not much of AJAX or JAVASCRIPT.

answered by 30.10.2018 в 16:57

Convert string to number, does not work for a large number? [duplicate] APS.NET MVC stored procedure that returns an array

score 1 · Accepted Answer

What you can do is, given that it is a dynamic query per row, assign a value in a field data to <tr/> that you are going to select. That way, when you do the query $.ajax() you can send the value you want to filter.

Something like this:

// Esta variable simula la respuesta de la llamada AJAX
const valoresAjax = {
  // Respuesta de la consulta enviando el parámetro codigo = 1
  "codigo1": [
    {
      "codigo": 5,
      "material": "Ladrillo común",
      "cantidad": "95 un",
      "precioUnitario": "574",
      "precio": "37.282"
    },
    {
      "codigo": 8,
      "material": "Cemento Portland",
      "cantidad": "11.8 kg",
      "precioUnitario": "960",
      "precio": "5.510"
    },
    {
      "codigo": 22,
      "material": "Cal Hidratada",
      "cantidad": "5.53 kg",
      "precioUnitario": "1.125",
      "precio": "6.221"
    },
    {
      "codigo": 3,
      "material": "Arena Lavada",
      "cantidad": "0.05 m3",
      "precioUnitario": "52.786",
      "precio": "2.639"
    },
  ],
  // Respuesta de la consulta enviando el parámetro codigo = 5
  "codigo5": [
    {
      "codigo": 5,
      "material": "Cerámica Esmaltada",
      "cantidad": "10",
      "precioUnitario": "30.000",
      "precio": "300.000"
    },
    {
      "codigo": 8,
      "material": "Agramassa",
      "cantidad": "50 kg",
      "precioUnitario": "32.000",
      "precio": "1.600.000"
    },
    {
      "codigo": 22,
      "material": "Pastina Klaukol",
      "cantidad": "12 kg",
      "precioUnitario": "10.000",
      "precio": "120.000"
    }
  ]
}
// Código HTML de tabla de detalle para creación dinámica
const tablaDetalleHTML = '<h3>Material por Cada Servicio</h3><table><thead><tr><th>Código</th><th>Material</th><th>Cantidad</th><th>Precio Unitario</th><th>Precio</th></tr></thead><tbody></tbody></table>';

$(document).ready(function(){
  $('.tablaPrincipal').on('click', 'tr', function(){
    // Obtener el valor del campo data-id de la fila
    // que recibe el evento click
    let paramId = $(this).data('id');
    
    // Este bloque representa la llamada AJAX
    /*$.ajax(
      url: url,
      data: {codigo: paramId},
      success: function(response){
      
        // Esta asignación está aquí como explicación de la asignación
        // de la variable response.
        let valoresAjax = {};
        valoresAjax[paramId] = response*/
        
        // Esta línea no es necesaria en la aplicación real
        // ya que valoresAjax[paramId] representa el response AJAX
        let response = valoresAjax[paramId];
        
        // Insertar el bloque HTML de tablaDetalle en el div.tablaDetalle
        $('.tablaDetalle').html($(tablaDetalleHTML));
        
        // La función map sirve para iterar los elementos de un arreglo
        response.map(f => {
          $('<tr><td>' + f.codigo + '</td><td>' + f.material + '</td><td>' + f.codigo + '</td><td>' + f.codigo + '</td><td>' + f.codigo + '</td></tr>').appendTo('.tablaDetalle tbody');
        });
      /*}
    )
    */
  });
});

body {
  font-family: "Arial", sans-serif;
}

table {
  border-collapse: collapse;
  background: #BFE5D0;
}

.tablaDetalle table {
  background: #C2E9F0;
}

table tr {
  border: solid 1px #74827B;
}

.tablaPrincipal tbody tr {
  cursor: pointer;
}

.tablaPrincipal tbody tr:hover {
  background: #7CAE92;
}

table td, table th {
  padding: 5px;
  border-right: solid 1px #A8B5DB;
}

table td:last-child, table th:last-child {
  border: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Servicios</h3>
<table class="tablaPrincipal">
  <thead>
    <tr>
      <th>Código</th>
      <th>Servicio</th>
      <th>Dimensión</th>
      <th>Precio</th>
      <th>Eliminar</th>
    </tr>
  </thead>
  <tbody>
    <tr data-id="codigo1">
      <td>1</td>
      <td>Pared de 0,15m</td>
      <td>25 m2</td>
      <td>14</td>
      <td></td>
    </tr>
    <tr data-id="codigo5">
      <td>1</td>
      <td>Piso de Cerámica</td>
      <td>10 m2</td>
      <td>25</td>
      <td></td>
    </tr>
</table>
<div class="tablaDetalle">
</div>