En el apartado anterior puse un pequeño ejemplo, ahora vamos ampliarlo.
Teníamos una tabla y en una columna una imagen que al pulsar sobre ella aparecía un Texto.
Ahora vamos hacer que al pinchar sobre esa imagen aparezca una tabla de detalle de ese registro. Vamos hacerlo utilizando un servlet, código jquery y html.
En el ejemplo anterior teníamos:
En la etiqueta img tendremos la etiqueta id="filaSeleccionada"
Donde queremos que salga el texto pondremos por ejemplo dentro de la etiqueta div, le añadimos la etiqueta id='miFila' y dentro del div el texto que queremos que aparezca.
Quitamos el texto pero dejamos el div.
Ponemos un campo hidden con el id del registro para montar la tabla con los datos Detalle de ese registro.
El código JQuery será ahora:
$(document).ready(function(){
jQuery('.filaSeleccionada').click(function() {
var numero = jQuery(this).next().attr('value'); --> este valor sera el del input hidden, con esto cogemos el valor del siguiente atributo que viene despues de la imagen.
con esto llamamos al servlet que es lo que hay dentro de las comillas y luego entre {} ponemos las variables que le vamos a pasar al servlet, en ese caso el id de la fila seleccionada
jQuery.getJSON ("generaTablaDetalle",
{ numeroFila : numero },
con lo que nos devuelve el servlet hacemos la siguiente operacion
function(data){ -->data es lo que nos devuelve el servlet
jQuery('#fila'+numero).html(data.detalle); --> con esta sintaxis hacemos que aparezca donde tenemos la etiqueta id fila+numerofila la tabla que nos ha devuelto el servlet.
con toggle hacemos que si se ha pulsado sobre la imagen se despliegue con un efecto(esto lo hace slow) la tabla creada y si volvemos a pulsar desaparece en caso de estar la tabla desplegada.
jQuery('#fila'+numero).toggle("slow");
}
);
});
};
Y el servlet que tendremos será parecido al siguiente:
public class MostrarDetalleServlet extends HttpServlet implements Servlet {
private static final long serialVersionUID = 1825793524350619027L;
private static Log log = LogFactory.getLog(MostrarDetalleServlet.class);
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter writer = response.getWriter(); --> con esto devolvemos al jquery la tabla que nos vamos a crear
//para el encoding
String responseEncoding = "text/html;charset=";
String encoding = null;
if (StringUtils.isNotEmpty(System.getProperty("sun.jnu.encoding"))) {
encoding = System.getProperty("sun.jnu.encoding");
} else {
encoding = "ISO-8859-1";
}
responseEncoding += encoding;
response.setContentType(responseEncoding);
String numeroFila=(String)request.getParameter("numeroFila"); --> el parámetro que le hemos pasado en el jquery al hacer la llamada del servlet.
String tablaDetalle=null;
//buscamos en base de datos los datos con ese id y montamos la tabla con el resultado obtenido.
tablaDetalle=método para crear la tabla;
//Redirigimos
writer.println(" {detalle : \""+ tablaDetalle +"\"} ");
writer.flush();
writer.close();
}
}
}
