generar tabla con jquery

mefistorey · #1 (**permalink**) 09/11/2010, 17:00

Estimados: Espero alguien pueda ayudarme con este dilema. Soy novato, por este mismo motivo he buscado desde hace días en la web y sólo obtengo respuestas de como implementar plug-in, y lo que necesito es simplemente generar una tabla con jquery.
Intento hacer:

Una lista de alumnos

Mi problema es el siguiente: estoy obteniendo datos desde un archivo de acción.php mediante Json y con estos datos pretendo generar una tabla con sus respectivas filas, según sean los datos obtenidos o listados obviamente; y crear la tabla dentro de una capa DIV (vacía) identificada como #lista_alumnos.
el código es el siguiente:

Código Javascript:

Ver originalfunction mostrar_alumno(id_alumno){
                
                $.ajax({
                        type: 'POST',
                        url: "accion_carga_alumno.php",
                        dataType: "json",
                        data: {idpac: id_alumno},
                        success: function(data){    
 
                            $("#lista_alumnos").append('<table cellpadding="0" cellspacing="0" border="1" class="display" id="lista_paciente">');
                            $("#lista_alumnos").append("<caption>Mi Tabla</caption>");
                            $("#lista_alumnos").append("<thead>");
                                $("#lista_alumnos").append("<tr>");                         
                                    $("#lista_alumnos").append("<th>Nombre</th>");
                                    $("#lista_alumnos").append("<th>Apellido</th>");
                                    $("#lista_alumnos").append("<th>Sexo</th>");
                                    $("#lista_alumnos").append("<th>Fecha</th>");
 
                                $("#lista_alumnos").append("</tr>");
                            $("#lista_alumnos").append("</thead>");
                            $("#lista_alumnos").append("<tbody>");
 
            $.each(data.filas,function(i,fila){
                                
                            $("#lista_alumnos").append("<tr>");
                                    $("#lista_alumnos").append("<td>"+fila.nombre+"</td>");
                                    $("#lista_alumnos").append("<td>"+fila.apellido+"</td>");
                                    $("#lista_alumnos").append("<td>"+fila.sexo+"</td>");
                                    $("#lista_alumnos").append("<td>"+fila.fecha+"</td>");
                                
                                    
                            $("#lista_alumnos").append("</tr>");
                        });
 
                            $("#lista_alumnos").append("</tbody>");
                            $("#lista_alumnos").append("</table>");
 
            }               
        });

Bueno, parece que no quiere funcionar, de hecho el inspector de elementos del chrome me dice que está mal cerrada la tabla.

Antes de formular la pregunta vale destacar que con el resultado de la obtención de la tabla quiero utilizar el plug-in de datatables.net.

La Pregunta es:
¿está bien utilizado el bucle? ¿Cómo o de qué manera se genera un bucle con la lista de resultados en cada <td> necesarios para crear una tabla automáticamente?
si lo tendría que hacer en php lo haría con este código:

Código PHP:

  <?php 
while($fila=mysql_fetch_array($articulos)){ 
?>

Desde ya muchas muchas, muchas gracias.

caricatos · #2 (**permalink**) 10/11/2010, 00:49

Tema movido desde javascript

Dany_s · #3 (**permalink**) 11/11/2010, 17:42

append te va agregando al final

cuando agregas

$("#lista_alumnos").append('<table cellpadding="0" cellspacing="0" border="1" class="display" id="lista_paciente">');

te crea con cierre
<table></table>
despues le decis que agregue caption, thead, despues tr etc

los tr te los va agregando fuera de la tabla, lo mismo que los td fuera de los tr

los td los tener que agregar al tr, el tr al tbody, el tbody a la tabla, etc

pero es mejor crear una cadena y agregarlo al div, aparte de que es más legible

Código HTML:

Ver original<html>
    <head>
        <title>Ejemplon</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    </head>
        <script type="text/javascript">
        $( function (){
 
            var tabla = '<table cellpadding="0" cellspacing="0" border="1" class="display" id="lista_paciente">';
                tabla += '<caption>Mi Tabla</caption>';
                tabla += '<thead>';
                tabla += '<tr>';
                tabla += '<th>Nombre</th><th>Apellido</th><th>Sexo</th><th>Sexo</th>';
                tabla += '</tr>';
                tabla += '</thead>';
                tabla += '<tbody>';
                tr = '';
 
                for (i = 0; i < 5; i++){
                    tr += '<tr>';
                    tr += '<td>'+i+'</td><td>ee</td><td>ii</td><td>oo</td>';
                    tr += '</tr>';
                }
 
                tabla += tr;
                tabla += '</tbody></table>';
 
                $('#lista_alumnos').html( tabla );
            });
 
        </script>
    <style>
    </style>
    <body>
 
        <div id="lista_alumnos"></div>
 
    </body>
</html>

mefistorey · #4 (**permalink**) 11/11/2010, 17:56

Dany_s quiero agradecerte por tu buena predisposición y voluntad para responder y compartir tus conocimientos, espero que este post le pueda servir a otros que tengan el mismo problema que yo.
Muchas Gracias !!!