New question

Question:

Date: 09-01-2018 06:27:33 (In Spanish)

Datatable y JSON: mostrar una lista JSON en una tabla HTML con JQuery[Resolved]

Hola comunidad,
estoy tratando de pasar una lista en formato Json y mostrarla en una tabla con Jquery, la primera parte (el contenido) me resulta pero el pie de la Tabla no lo sé poner ...quizás alguién de ustedes sabe cómo? Les estaría muy agradecida por alguna ayuda.
<script type="text/javascript">

	$(document).ready(function(){
	var url="generarJSON2.php";
		$("#tablajson tbody").html("");
		$.getJSON(url,function(clientes){
		$.each(clientes, function(i,cliente){
			var newRow =
			"<tr>"
			+"<td>"+cliente.id+"</td>"
			+"<td>"+cliente.nombre+"</td>"
			+"<td>"+cliente.edad+"</td>"
			+"<td>"+cliente.genero+"</td>"
			+"<td>"+cliente.email+"</td>"
			+"<td>"+cliente.localidad+"</td>"
			+"<td>"+cliente.telefono+"</td>"
			+"<td>"+cliente.cantidad+"</td>"
			+"<td>"+cliente.precio+"</td>"
			+"<td>"+cliente.saldo+"</td>"
			+"<td>"+cliente.saldo_cum+"</td>"
			+"</tr>";					
		$(newRow).appendTo("#tablajson tbody");
	
	});
	$("#tablasaldo tbody").html("");						
	var newRow2 =			
	"<tr>"
	+"<td>Total</td>"
	+"<td> </td>"
	+"<td> </td>"
	+"<td> </td>"
	+"<td> </td>"
	+"<td> </td>"
	+"<td> </td>"
	+"<td> </td>"
	+"<td> </td>"
	+"<td>"+cliente.saldo+"</td>"
	+"<td>"+cliente.saldo_cum+"</td>"
	+"</tr>";			
	$(newRow2).appendTo("#tablasaldo tbody");
	});
	});

	</script>
Tags: HTML - HTML Table - Javascript - Javascript JSON - JQuery - JSON - Question Votes: 0 - Answers: 12 - Views: 22 Share on: Google Facebook Twitter LinkedIn Link
 

Answers:

  • Date: 09-01-2018 09:01:35 Hola Maria,
    Recuerda que las tablas tienen 3 elementos:
    - thead: Para los encabezados
    - tfoot: Para el pie de tabla
    - tbody: Para el cuerpo de la tabla

    En tu caso puedes crear un elemento tfoot para agregar a tu tabla y que se despliegue al final.

    Sólo 1 observación adicional respecto al elemento #tablasaldo:
    No es necesario tantas líneas con elementos td vacíos, puedes hacer lo siguiente.

    $("#tablasaldo tbody").html("");                        
        var newRow2 =            
        "<tr>"
        +'<td colspan="9">Total</td>'
        +"<td>"+cliente.saldo+"</td>"
        +"<td>"+cliente.saldo_cum+"</td>"
        +"</tr>";            
        $(newRow2).appendTo("#tablasaldo tbody");
        });
        });
    
      Votes: 1 - Link answer
     
  • Date: 09-01-2018 10:43:29 Hola Ernesto, gracias por la pronta respuesta,
    lo traté de realizar , pero algo hago mal ...
    <section>
    	<table class="grilla" id="tablajson">
    	<thead>
    	<th>Id</th>
    	<th>Nombre</th>
    	<th>Edad</th>
    	<th>Género</th>
    	<th>Email</th>			
    	<th>Localidad</th>
    	<th>Teléfono</th>	
    	<th>cantidad</th>	
    	<th>precio</th>	
    	<th>saldo</th>	
    	<th>saldo cum</th>				
    	</thead>
    	<tbody></tbody>
    	<tfoot>	</tfoot>
    	</table>
    	<script type="text/javascript">
    
    	$(document).ready(function(){
    	var url="generarJSON2.php";
    		$("#tablajson tbody").html("");
    		$.getJSON(url,function(clientes){
    		$.each(clientes, function(i,cliente){
    			var newRow =
    			"<tr>"
    			+"<td>"+cliente.id+"</td>"
    			+"<td>"+cliente.nombre+"</td>"
    			+"<td>"+cliente.edad+"</td>"
    			+"<td>"+cliente.genero+"</td>"
    			+"<td>"+cliente.email+"</td>"
    			+"<td>"+cliente.localidad+"</td>"
    			+"<td>"+cliente.telefono+"</td>"
    			+"<td>"+cliente.cantidad+"</td>"
    			+"<td>"+cliente.precio+"</td>"
    			+"<td>"+cliente.saldo+"</td>"
    			+"<td>"+cliente.saldo_cum+"</td>"
    			+"</tr>";					
    		$(newRow).appendTo("#tablajson tbody");
    	
    	});
    	$("#tablajson tfoot").html("");                        
        var newRow2 =            
        "<tr>"
    		+'<td colspan="9">Total</td>'
    		+"<td>"+cliente.saldo+"</td>"
    		+"<td>"+cliente.saldo_cum+"</td>"
        +"</tr>";            
        $(newRow2).appendTo("#tablasaldo tfoot");
        });
        });
    	</script>
    
    
    </section>
    
    
    
    </body>
    </html>
    
      Votes: 0 - Link answer
     
  • Date: 09-01-2018 23:56:27 Hola María:

    Algunas cosas para probar.

    En el último código expuesto, y me limito al tfoot, primiero llamas $("#tablajson tfoot").html(""); y después insertas el appendTo en $(newRow2).appendTo("#tablasaldo tfoot"); ¿¿Diferente ID ??

    Para una segunda prueba (y ten cuidado porque tienes comillas dobles en todo, incluido colspan="9" que te puede arrojar error):
    En vez de llamar a $("#tablajson tfoot").html(""); ¿por qué no simplemente a $("#tablajson").html(""); e insertar el elemento tfoot en la variable newRow2. El código quedaría así:
    $("#tablajson").html("");
    var newRow2 =
        "<tfoot>"
        +"<tr>" +
        +'<td colspan='9'>Total</td>' +
        +"<td>" + cliente.saldo + "</td>" +
       + "<td>" + cliente.saldo_cum + "</td>" +
        +"</tr>";
        +"</tr>"
        +"</tfoot>";
    $(newRow2).appendTo("#tablajson");


    Y por las dudas una tercera prueba.
    El algunos casos (en concreto con los infoWindow de Google maps con o jQuery) no me permite saltos de línea aunque sí código HTML. Es un engorro muy feo de trabajar pero quedaría así:
    var newRow2 = '<tfoot><tr><td colspan="9">Total</td><td>' + cliente.saldo + '</td><td>' + cliente.saldo_cum + '</td></tr></tr></tfoot>';


    En este último, te he cambiado las comillas simples enternas y las dobles en el colspan.

    Saludos,
      Votes: 1 - Link answer
     
  • Date: 10-01-2018 01:23:42 Hola Txema, muchas gracias, lo de las comillas ya me habían presentado errores, tu ejemplo lo probé y resulta (el ejemplo de la tercera prueba), pero con el efecto que repite el foot al igual que la parte del contenido del body, en otras palabras no sé dónde ubicarlo en jscript que no sea dentro del bucle each....ese es el problema, por el momento lo tengo así y está mal aunque funciona con las repeticiones mencionadas:
    <table id = "tablajson" class="grilla">
    		<thead>
    		</thead>
    		<tbody>
    		</tbody>
    	</table>
    	 <script type="text/javascript">
    		$(document).ready(function (){
    			$("#tablajson tbody").html("");
    			$.getJSON("generarJSON2.php",
    				function(usuarios){
    			$.each(usuarios, function(i, usuario){
    			var newRow=
    			"<tr>"
    			+"<td>"+usuario.id+"</td>"
    			+"<td>"+usuario.nombre+"</td>"
    			+"<td>"+usuario.edad+"</td>"
    			+"<td>"+usuario.genero+"</td>"
    			+"<td>"+usuario.email+"</td>"
    			+"<td>"+usuario.localidad+"</td>"
    			+"<td>"+usuario.telefono+"</td>"
    			+"<td>"+usuario.cantidad+"</td>"
    			+"<td>"+usuario.precio+"</td>"
    			+"<td>"+usuario.saldo+"</td>"
    			+"<td>"+usuario.saldo_cum+"</td>"
    			+"</tr>";			
    			$(newRow).appendTo("#tablajson tbody");	
    			//$("#tablajson").html("");				
    			var newRow2 = '<tfoot><tr><td colspan="9">Total</td><td>' + usuario.saldo + '</td><td>' + usuario.saldo_cum + '</td></tr></tr></tfoot>';
    			$(newRow2).appendTo("#tablajson");
    			});				
    			});			
    		});
    	</script>  
      Votes: 0 - Link answer
     
  • Date: 10-01-2018 02:35:46 La verdad es que he estado probando con mis JSON y está funcioanado.

    Del último script que envías, var newRow2 tiene que estar fuera del bucle $.each(usuarios, function(i, usuario) pero dentro de la lectura del JSON ($.getJSON("generarJSON2.php",
    function(usuarios)
    )

    Sería:
    <table id="tablajson" class="grilla">
        <thead>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script>
        $(document).ready(function() {
            $("#tablajson tbody").html("");
            $.getJSON("generarJSON2.php", function(usuarios) {
                $.each(usuarios, function(i, usuario) {
                    var newRow =
                        "<tr>" +
                        "<td>" + usuario.id + "</td>" +
                        "<td>" + usuario.nombre + "</td>" +
                        "<td>" + usuario.edad + "</td>" +
                        "<td>" + usuario.genero + "</td>" +
                        "<td>" + usuario.email + "</td>" +
                        "<td>" + usuario.localidad + "</td>" +
                        "<td>" + usuario.telefono + "</td>" +
                        "<td>" + usuario.cantidad + "</td>" +
                        "<td>" + usuario.precio + "</td>" +
                        "<td>" + usuario.saldo + "</td>" +
                        "<td>" + usuario.saldo_cum + "</td>" +
                        "</tr>";
                    $(newRow).appendTo("#tablajson tbody");
                    //$("#tablajson").html("");
                });
                var newRow2 = '<tfoot><tr><td colspan="9">Total</td><td>' + usuario.saldo + '</td><td>' + usuario.saldo_cum + '</td></tr></tr></tfoot>';
                $(newRow2).appendTo("#tablajson");
            });
        });
    </script>

    Más temas a probar:

    Yo suelo utilizar más .append que .appendTo. Será porque ya soy viejo. Las sutiles diferencias están documentadas --aquí--.

    También puedes utilizar el for para recorrer el contenido (otra historia que también pertenece a las viejas / malas prácticas, pero funciona). El código sería (ojo que hay un paréntesis menos en el cierre de la llave del for):
        $(document).ready(function() {
            $("#tablajson tbody").html("");
            $.getJSON("generarJSON2.php", function(usuarios) {
                for (var i = 0; i < usuarios.length; i++) {
                    var newRow =
                        "<tr>" +
                        "<td>" + usuarios[i].id + "</td>" +
                        "<td>" + usuarios[i].nombre + "</td>" +
                        "<td>" + usuarios[i].edad + "</td>" +
                        "<td>" + usuarios[i].genero + "</td>" +
                        "<td>" + usuarios[i].email + "</td>" +
                        "<td>" + usuarios[i].localidad + "</td>" +
                        "<td>" + usuarios[i].telefono + "</td>" +
                        "<td>" + usuarios[i].cantidad + "</td>" +
                        "<td>" + usuarios[i].precio + "</td>" +
                        "<td>" + usuarios[i].saldo + "</td>" +
                        "<td>" + usuarios[i].saldo_cum + "</td>" +
                        "</tr>";
                    $(newRow).append("#tablajson tbody");
                    //$("#tablajson").html("");
                };
                var newRow2 = '<tfoot><tr><td colspan="9">Total</td><td>' + usuarios[i].saldo + '</td><td>' + usuarios[i] .saldo_cum + '</td></tr></tr></tfoot>';
                $(newRow2).append("#tablajson");
            });
        });


    Ojo que los datos los recojo con usuarios[i] (con la S), como podría ser "data[i]," según el nombre que tengas registrado en $.getJSON("generarJSON2.php", function(usuarios).

    EDITO; la última línea con var newRow2 no te va a recoger los datos. Necerítaría ver un par de líneas iniciales y la línea de los totales del JSON generaDO para rehacer el código.
    Si ésta fuese la última línea, podría ser algo parecido a (detallo solo las variables) usuarios[usuarios.length - 1].saldo y usuarios[usuarios.length - 1] .saldo_cum siendo que en el for tendríamos for (var i = 0; i < (usuarios.length - 2); i++) para que no recoja la última línea.

    Dado que el array se inicia con 0, length - 1 coresponde a esa última línea.

    Tendría que ver el JSON.
      Votes: 1 - Link answer
     
  • Date: 10-01-2018 04:04:06 Gracias por el código Txema, desgraciadamente no me funciona, queda todo en blanco y más encima no reconoce la variable saldo...igual esta noche me pondré a ver que pasa, la que tengo funciona pero sólo con el cuerpo de la tabla, el foot no lo acepta y no lo lee fuera del each...que pena... muchas gracias nuevamente...   Votes: 0 - Link answer
     
  • Date: 10-01-2018 04:32:23 María, el tfoot debe ir afuera del each.
    Pero tfoot está usando 'cliente', y cliente no existe fuera del each (scope).
    Entonces tienes que tener el valor de las sumas en variables definidas afuera.

    Si deseas conservar tu código y suponiendo que en el json que lees NO tiene la suma de las columnas que te interesan, entonces tienes que cambiar el contenido js así:
    var url="unJSON.json";
        $("#tablajson tbody").html("");
        $.getJSON(url,function(clientes){
            // defino variables que guarda sumas
            var suma1=0,suma2=0;
            $.each(clientes, function(i,cliente){
                var newRow =
                "<tr>"
                +"<td>"+cliente.id+"</td>"
                +"<td>"+cliente.nombre+"</td>"
                +"<td>"+cliente.edad+"</td>"
                +"<td>"+cliente.genero+"</td>"
                +"<td>"+cliente.email+"</td>"
                +"<td>"+cliente.localidad+"</td>"
                +"<td>"+cliente.telefono+"</td>"
                +"<td>"+cliente.cantidad+"</td>"
                +"<td>"+cliente.precio+"</td>"
                +"<td>"+cliente.saldo+"</td>"
                +"<td>"+cliente.saldo_cum+"</td>"
                +"</tr>";				
                $(newRow).appendTo("#tablajson tbody");
                // acumulo los valores de cada uno
                suma1+=parseInt(cliente.saldo);
                suma2+=parseInt(cliente.saldo_cum);
            });
            $("#tablajson tfoot").html("");
            // uso las sumas en vez de cliente ya que
            // 'cliente' no existe fuera del each (alcance)                       
                var newRow2 =            
            "<tr>"
                +'<td colspan="9">Total</td>'
                +"<td>"+suma1+"</td>"
                +"<td>"+suma2+"</td>"
            +"</tr>";            
            $(newRow2).appendTo("#tablajson tfoot");
        });

    Puedes usar for ( cliente of clientes){ // el código... } en vez de each.
    Otra posibilidad es hacerlo como dice Txema, con 'For' y si tienes la suma en el último json del archivo, el for lo corres desde i=0 hasta i< clientes.length-1, guardando el último para el tfoot.
    En todo caso, el código que puso Txema para newRow2 está usando el 'i' fuera del for y eso hace que falle, debería usar el índice de la última línea.
    Te dejo el unJSON.json que usé:
    [{
            "id": "1",
            "nombre": "nombre 1",
            "edad": "edad 1",
            "genero": "gen 1",
            "email": "email 1",
            "localidad": "locali 1",
            "telefono": "telef 1",
            "cantidad": "1",
            "precio": "2",
            "saldo": "2",
            "saldo_cum": "4"
        },
        {
            "id": "2",
            "nombre": "nombre 2",
            "edad": "edad 2",
            "genero": "gen 2",
            "email": "email 2",
            "localidad": "locali 2",
            "telefono": "telef 2",
            "cantidad": "2",
            "precio": "2",
            "saldo": "2",
            "saldo_cum": "4"
        },
        {
            "id": "3",
            "nombre": "nombre 3",
            "edad": "edad 3",
            "genero": "gen 3",
            "email": "email 3",
            "localidad": "locali 3",
            "telefono": "telef 3",
            "cantidad": "3",
            "precio": "2",
            "saldo": "2",
            "saldo_cum": "4"
        }
    ]

    Espero te ayude. Un abrazo
      Votes: 1 - Link answer
     
  • Date: 10-01-2018 07:38:07 Prueba así:
    <table>
      <thead>
        <tr>
          <th>id</th>
          <th>Nombre</th>
          <th>Apellido</th>
          <th>Saldo</th>
          <th>Acumulado</th>
        </tr>
      </thead>
      <tbody id="lista">
        
      </tbody>
      <tfoot id="pie">
        
      </tfoot>
    </table>
    


    $.getJSON('https://hitcel.com/data.php',function(clientes){
      
      for(var i = 0; i < clientes.lista.length; i++){
      	$("#lista").append(`
        	<tr>
          	<td>`+clientes.lista[i].id+`</td>
            <td>`+clientes.lista[i].nombre+`</td>
            <td>`+clientes.lista[i].apellido+`</td>
            <td>`+clientes.lista[i].saldo+`</td>
            <td>`+clientes.lista[i].total+`</td>
           </tr>
        `);
      };
      $("#pie").append(`
        	<tr>
          	<td colspan='3'>Total:</td>
            <td>`+clientes.saldoTotal+`</td>
            <td>`+clientes.saldoAcumulado+`</td>
          </tr>
        `)
    })
    


    estructura de JSON
    {
        "saldoTotal":"1150",
        "saldoAcumulado":"1320",
        "lista":[
            {
                "id":"1",
                "nombre":"Saul",
                "apellido":"Brito",
                "saldo":"200",
                "total":"200"
            },
            {
                "id":"2",
                "nombre":"Carlos",
                "apellido":"Romero",
                "saldo":"450",
                "total":"620"
            },
            {
                "id":"3",
                "nombre":"Ricardo",
                "apellido":"Gonzalez",
                "saldo":"500",
                "total":"500"
            }
        ]
    }
    



    MUESTRA

    NOTA: la purba esta temporal, luego eliminamos el json en la empresa. Saludos
      Votes: 1 - Link answer
     
  • Date: 10-01-2018 09:26:46 Hola Néstor, acabo de leer el correo, la muestra y las referencias a que debo contemplar dieron el resultado requerido...uff que alivio, muchas gracias, un código limpio y comprensible. Hace lo que quería lograr. Que te voy a decir, muchas gracias Néstor!!
    María Cristina
      Votes: 1 - Link answer
     
  • Date: 10-01-2018 09:28:53 Hola Carlos Quintero, acabo de probar tu respuesta que también funciona en forma fantástica, eso quería poder lograr, una especia de balance con totales al pie de la tabla.
    Por tanta ayuda y tan buena explicación, miles de gracias Carlos. Estoy muy agradecida.

    María Cristina
      Votes: 1 - Link answer
     
  • Date: 15-01-2018 10:26:11 Buenas tardes, según entiendo estas utilizando DataTable. Puede que el script te funcione pero no debería hacerse de esa manera.
    $(document).ready(function() {
    $('#example').DataTable( {
    "processing": true,
    "serverSide": true,
    "ajax": "scripts/server_processing.php"
    } );
    } );
    DataTable - Server Side Processing
      Votes: 0 - Link answer
     
  • Date: 15-01-2018 11:35:13 Hola Darwin, en este ejemplo estoy usando Bootstrap + javascript, pero no datatables plugin. Esa será otra experiencia porque ya no es tan trivial colocar los resultados en los pies de la tabla por lo que he leído... Gracias por tu comentario Darwin ...   Votes: 0 - Link answer
     
To actively participate in the community first must authenticate, enter the system.Sign In