Crear DataGrid en JSP

[fvelazquez]

Buenos Días Compañeros,


Soy nuevo en el foro, pero recurro a ustedes a ver si alguno me puede ayudar con un inconveniente que tengo.
Estoy realizando un sitio web con JSP y AJAX y necesito crear Data Grids para mostrar información de la BD, pero por mas que he buscado no he encontrado una solución factible.

Alguno me podría dar alguna sugerencia?

Gracias

Francisco Velásquez Rivas.

[lukos]

Hola
Mira hace poco hice algo así (highlight en C++, pero es java ):

Código C++:

//clase1.java
ResultSet rs = query.executeQuery("select * from pendientes");
                rs.afterLast();
                Boolean seguir=rs.previous();
                while(seguir){ 
                    respuesta= respuesta + rs.getString(1)+ "#" +rs.getString(2)+ "#" +rs.getString(3)+ "#" + rs.getString(4)+ "#" +rs.getString(5)+ "@";
                    seguir=rs.previous();
                }
                rs.close(); query.close(); conexion.close();
 

Y la respuesta era algo como esto (siguiendo a id, ip, requerimiento, archivo, fecha ):

101#192.168.1.190#hardware#C:\infoextra.txt#2010-05-16@

El "@" es para terminar la línea, en caso que tengas más de 1.
Una vez que tenía todo el resultado, quedaba guardado en la variable respuesta, y ésta la enviaba a:

Código C++:

//clase2.java
private String respuestaXML = "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>";
private String Pendientes(String cadena){
        Boolean v=true;
        try{
            String [] temp = cadena.split("@");
            for (String algo : temp){
                String [] temp1 = algo.split("#");
                if (v) {
                    cuerpo ="<orden id=\""+temp1[0]+"\"><ip>"+temp1[1]+"</ip>"+"<req>"+
                            temp1[2]+"</req><arch>"+temp1[3]+"</arch><fecha>"+temp1[4]+"</fecha></orden>";
                    v=false;
                }else{
                    cuerpo =cuerpo+"<orden id=\""+temp1[0]+"\"><ip>"+temp1[1]+"</ip>"+"<req>"+
                            temp1[2]+"</req><arch>"+temp1[3]+"</arch><fecha>"+temp1[4]+"</fecha></orden>";
                }
            }
            this.respuesta = "<OrdenesPendiente>"+cuerpo+"</OrdenesPendiente>";
        }catch(Exception e){
            this.respuestaXML = e.toString();
        }
        return this.respuestaXML + this.respuesta;
    }
 

De esta forma, recorres el string hasta encontrar el "@" (para abrir un padre), y separas cada pedazo en un string menor. Haces lo mismo, pero hasta encontrar el "#" (para el hijo) y luego ya separas tal cual.
Devuelves el resultado y te queda algo así:

Código XML:

<OrdenesPendiente>
  <orden id="4">
    <ip>192.168.13.154</ip>
    <req>Otro</req>
    <arch>System.Web.DynamicData.dll</arch>
    <fecha>2010-08-19</fecha>
  </orden>
  <orden id="5">
    <ip>192.168.1.197</ip>
    <req>Hardware</req>
    <arch>ruta</arch>
    <fecha>2010-08-23</fecha>
  </orden>
</OrdenesPendiente>
 

Y todo esto lo llamas desde un js.

Código Javascript:

function leePendientes(){
    if (oXML.readyState==4) {
        try{
            var xml = oXML.responseXML;
            var cant = xml.getElementsByTagName('orden').length;
            var respuesta = "<table id=\"pendientes\" class=\"tablesorter\" ><thead><tr><th>ID</th><th>IP</th><th>Requerimiento</th>"+
                "<th>Archivo Adjunto</th><th>Fecha</th></tr></thead><tbody>";
            var semiResp;
            for(i=0;i<cant;i++){
                var resp = "<tr>";
                var id = xml.getElementsByTagName('orden').item(i).getAttribute('id');
                resp = resp + "<td onClick=\"RoA("+id+")\">"+ id + "</td>";
                resp = resp + "<td>"+ xml.getElementsByTagName('ip')[i].firstChild.data + "</td>";
                resp = resp + "<td>"+ xml.getElementsByTagName('req')[i].firstChild.data + "</td>";
                resp = resp + "<td>"+ xml.getElementsByTagName('arch')[i].firstChild.data + "</td>";
                resp = resp + "<td>"+ xml.getElementsByTagName('fecha')[i].firstChild.data + "</td>";
                resp = resp + "</tr>";
                if (i==0) {
                    semiResp = resp;
                }else{
                    semiResp = semiResp + resp;
                }
            }
            document.getElementById('content_2').innerHTML = respuesta + semiResp + "</tboby>";
            try{
                $("#pendientes").tablesorter({headers: {0:{sorter: false}, 1:{sorter: false}, 3:{sorter: false}}, widgets: ['zebra']});
            }catch(e){
                alert(e.toString());
            }
        }catch (e){
            alert(e.toString());
        }
    }else{
        document.getElementById('content_2').innerHTML = '<b>Cargando..</b>';
    }
}
 

Y listo Es cosa que lo adaptes a lo que quieres hacer.
Para la grilla puedes usar [URL="http://tablesorter.com"]tablesorter[/URL] viendo los tutos en la misma web

[cptanalatriste]

O podrías usar también DisplayTag (http://displaytag.sourceforge.net/1.2/) . Por estos lares es bastante popular xD

[fvelazquez]

Muchas Gracias por las respuestas a los 2. Me fui por la opción de Lukos, funcionó muy bien, aunque estuve batallando por unas horas ya lo logré.

Mil Gracias de nuevo.

Saludos

[lukos]

Ps yo estuve batallando cerca de 5 días

Que bueno que te sirva

[GreenEyed]

Una opción parecida a lo de Lukos es usar DataTable de YUI. Parecido pero la parte de la tabla está ya hecha, con paginación, ordenaciones etc..

[fvelazquez]

Vuelvo a escribir, tal vez me puedan responder esta duda.

A la hora de mostrar el DataGrid creado con la opcion de Lukos todo normal, pero por ejemplo lo que quiero hacer es que la darle clic al ID del Empleado por ejemplo, me devuelve un número que nada que ver. Lo extraño es que en algunos casos lo hace bien pero en otros no

Esta es la función que dibuja el Grid

Código Javascript:

function funcionCallback()
{
    // Comprobamos si la peticion se ha completado (estado 4)
    if( ajax4.readyState == 4 )
    {
        // Comprobamos si la respuesta ha sido correcta (resultado HTTP 200)
        if( ajax4.status == 200 )
        {
            // Escribimos el resultado en la pagina HTML mediante DHTML
            //document.all.grid_COSE041.innerHTML = "<b>"+ajax4.responseText+"</b>";
                        try
                        {
                        var xml = ajax4.responseXML;
                        var i=0;
                        var cant = xml.getElementsByTagName('EMPNUM').length;
                        var respuesta;
                        if(tip=='A')
                            {
                                respuesta = "<table id=\"COSE041\" border=2><thead><tr><th>INACTIVAR</th><th>FOLIO</th><th>NOMBRE</th>"+
                                    "</thead><tbody>";
                        }
                        else
                            {
                                respuesta = "<table id=\"COSE041\" border=2><thead><tr><th>ACTIVAR</th><th>FOLIO</th><th>NOMBRE</th>"+
                                    "</thead><tbody>";
                            }
                        var semiresp;
                        for(i=0;i<cant;i++)
                        {
                            var resp = "<tr>";
                            var id = xml.getElementsByTagName('EMPNUM').item(i).getAttribute('id');
 
                            resp = resp + "<td>"+ id + "</td>";
                            resp = resp + "<td>"+ xml.getElementsByTagName('EMPNOM')[i].firstChild.data + "</td>";
                            if(tip=='A')
                                {
                                    resp = resp + "<td><img alt=Consultar  src=imagenes/equis.png onClick=\"activar("+id+",'I');\"></td>";
                                }
                                else
                                    {
                                        resp = resp + "<td><img alt=Consultar  src=imagenes/cambiar.png onClick=\"activar("+id+",'A');\"></td>";
                                    }
                            resp = resp + "</tr>";
                            if (i==0)
                            {
                                semiresp = resp;
                            }
                            else
                            {
                                semiresp = semiresp + resp;
                            }
                        }
                        document.getElementById('grid_COSE041').innerHTML = respuesta + semiresp + "</tboby></table>";
                }
                catch(e)
                {
                    alert(e.toString());
                }
        }
    }
}
 

Esta es la que llama el evento para obtener el id del Empleado

Código Javascript:

function activar(EMPNUM, TIPO)
{
    // Creamos el control XMLHttpRequest segun el navegador en el que estemos
    if( window.XMLHttpRequest )
        ajax5 = new XMLHttpRequest(); // No Internet Explorer
    else
        ajax5 = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer
 
    // Almacenamos en el control al funcion que se invocara cuando la peticion
    // cambie de estado
    ajax5.onreadystatechange = funcionCallback5;
 
    // Enviamos la peticion
        if(TIPO=='I')
            {
                confirmar = confirm('Desea Inactivar al Empleado ' + EMPNUM + '?');
                if(confirmar==true)
                    {
                        ajax5.open( "GET", "ActEmpSie.jsp?SIENUM="+document.all.txt_siembra.value+"&EMPNUM="+EMPNUM +"&TIPO="+TIPO, true );
                        ajax5.send( "" );
                    }
            }
            else
                {
                    confirmar = confirm('Desea Activar Nuevamente al Empleado ' + EMPNUM + '?');
                    if(confirmar==true)
                        {
                            ajax5.open( "GET", "ActEmpSie.jsp?SIENUM="+document.all.txt_siembra.value+"&EMPNUM="+EMPNUM +"&TIPO="+TIPO, true );
                            ajax5.send( "" );
                        }
                }
}
 

Ojala me pudieran ayudar como lo hicieron antes.

Muchas Gracias de Antemano...

[lukos]

Ps la verdad es que leyendo de buenas a primeras no entiendo
Pero, suponiendo que tienes un id=5, debería salirte 5 no? Entonces qué valor te sale? Puede ser que estes tomando mal el índice. O en la iteración, o en la generación del XML

Podrías tirarte un ejemplo con valores

[fvelazquez]

Buenas ya resolví el asunto, muchas gracias por toda la ayuda que me han brindado, el asunto era una cuestion de comillas, por dicha era eso.

De nuevo gracias!!!

[fvelazquez]

Mmmm que mal, ahora es otro problema,

Cuando llamo al método que crea el XML la primera vez funciona correctamente, pero despues que actualizo los datos en la BD, la página no actualiza la información cuando llamo el método de nuevo, será que me falta algo y no lo se aun?

METODOS AJAX

Código PHP:

<script>
 
function funcionCallback4()
{
    // Comprobamos si la peticion se ha completado (estado 4)
    if( ajax4.readyState == 4 )
    {
        // Comprobamos si la respuesta ha sido correcta (resultado HTTP 200)
 
        //if( ajax4.status == 200 )
        //{
            // Escribimos el resultado en la pagina HTML mediante DHTML
            //document.all.grid_COSE041.innerHTML = "<b>"+ajax4.responseText+"</b>";
 
 
                        try
                        {
                        document.all.lbl_Mensaje.innerHTML ="";
                        var xml = ajax4.responseXML;
                        var i=0;
                        var cant = xml.getElementsByTagName('EMPNUM').length;
                        var respuesta;
                        if(tip=='A')
                            {
                                respuesta = "<table id=\"COSE041\" border=2><thead><tr><th>INACTIVAR</th><th>FOLIO</th><th>NOMBRE</th>"+
                                    "</thead><tbody>";
                        }
                        else
                            {
                                respuesta = "<table id=\"COSE041\" border=2><thead><tr><th>ACTIVAR</th><th>FOLIO</th><th>NOMBRE</th>"+
                                    "</thead><tbody>";
                            }
                        var semiresp;
                        for(i=0;i<cant;i++)
                        {
                            var resp = "<tr>";
                            var id = xml.getElementsByTagName('EMPNUM').item(i).getAttribute('id');
                            if(tip=='A')
                            {
                                resp = resp + "<td><img alt=Consultar  src=imagenes/equis.png onClick=activar('" + id + "','I');></td>";
                            }
                            else
                            {
                                resp = resp + "<td><img alt=Consultar  src=imagenes/cambiar.png onClick=activar('" + id + "','A');></td>";
                            }
                            resp = resp + "<td>"+ id + "</td>";
                            resp = resp + "<td>"+ xml.getElementsByTagName('EMPNOM')[i].firstChild.data + "</td>";
 
                            resp = resp + "</tr>";
                            if (i==0)
                            {
                                semiresp = resp;
                            }
                            else
                            {
                                semiresp = semiresp + resp;
                            }
                        }
                }
                catch(e)
                {
                    alert(e.toString());
                }
 
                document.all.lbl_Mensaje.innerHTML = respuesta + semiresp + "</tboby></table>";
        //}
    }
}
 
function grid_COSE041(TIPO)
{
    // Creamos el control XMLHttpRequest segun el navegador en el que estemos
    if( window.XMLHttpRequest )
        ajax4 = new XMLHttpRequest(); // No Internet Explorer
    else
        ajax4 = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer
 
    // Almacenamos en el control al funcion que se invocara cuando la peticion
    // cambie de estado
    ajax4.onreadystatechange = funcionCallback4;
        tip = TIPO;
    // Enviamos la peticion
        ajax4.open( "GET", "gridCOSE041.jsp?SIENUM="+document.all.txt_siembra.value+"&TIPO="+TIPO, true);
        ajax4.send( "" );
}
 
</script>
 

CREO XML

Código PHP:

<%@page contentType="text/xml" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
 
<%
    HttpSession sesion = request.getSession();
    String id_usuario = (String)sesion.getAttribute("id_usuario");
    String password = (String)sesion.getAttribute("password");
    String SIENUM = request.getParameter("SIENUM");
    String TIPO = request.getParameter("TIPO");
    Acceso acceso = new Acceso();
    String respuestaXML;
    respuestaXML = "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>";
    String cadena = "";
    if(TIPO.equals("A"))
        {
           // Este metodo me devuelve el resultado de la sentencia SQL
            cadena = acceso.grid_COSE041(SIENUM, id_usuario, password);
        }
    else
        {
            // Este metodo me devuelve el resultado de la sentencia SQL
            cadena = acceso.grid_COSE041A(SIENUM, id_usuario, password);
        }
    String cuerpo ="";
    String respuesta = "";
        Boolean v=true;
        try{
            String [] temp = cadena.split("@");
            for (String algo : temp){
                String [] temp1 = algo.split("#");
                if (v) {
                    cuerpo ="<EMPNUM id=\""+temp1[0]+"\"><EMPNOM>"+temp1[1]+"</EMPNOM>" + "</EMPNUM>";
                    v=false;
                }else{
                    cuerpo =cuerpo + "<EMPNUM id=\"" + temp1[0] + "\"><EMPNOM>"+temp1[1].trim() + "</EMPNOM>" + "</EMPNUM>";
                }
            }
            respuesta = "<COSE041>" + cuerpo + "</COSE041>";
        }catch(Exception e){
            respuestaXML = e.toString();
        }
        out.print(respuestaXML + respuesta);
%>
 

Disculpen las molestias

[MarioCares]

Hombre ninguna molestia!
Ps puedes usar un timer para ir actualizando cada cierto tiempo la tabla.
Agregas esto:

Código Javascript:

var idTimer;
function timer(){
    oXML = AJAXCrearObjeto();
    oXML.open("GET", "gridCOSE041.jsp?SIENUM="+document.all.txt_siembra.value+"&TIPO="+TIPO",true);
    oXML.onreadystatechange=leePendientes;    
    oXML.send(null);
    this.idTimer = setTimeout('timer();',10000);
}
//En este caso 10000 son 10 segundos.
 

Y ps la llamas desde el onLoad del body ;)