Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Implementar grid 'DataTables' con resultado AJAX en JSP

Estas en el tema de Implementar grid 'DataTables' con resultado AJAX en JSP en el foro de Jquery en Foros del Web. Saludos, eh estado tratando de implementar un grid que encontre en la web llamado DataTables con el resultado de una consulta hecha atraves de $.ajax({}), ...
  #1 (permalink)  
Antiguo 17/04/2013, 14:15
 
Fecha de Ingreso: agosto-2012
Ubicación: Agüitas Ranch
Mensajes: 18
Antigüedad: 11 años, 7 meses
Puntos: 0
Exclamación Implementar grid 'DataTables' con resultado AJAX en JSP

Saludos, eh estado tratando de implementar un grid que encontre en la web llamado DataTables con el resultado de una consulta hecha atraves de $.ajax({}), el detalle esta en que al parecer la impresion de la tabla que me regresa esta funcion no la esta respetando el jQuery del DataTables, quisiera saber si es posible realizarlo de la siguiente manera.

Tengo un archivo llamado tabla.jsp donde tengo lo siguiente resumido.

Código PHP:
//hago la llamada a las librerias necesarias del dataTables y a la hoja de estilos
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript" language="javascript" src="../../../Librerias/Javascript/dataTables/js/jquery.dataTables.js"></script>

<link rel="stylesheet" type="text/css" href="../../../Librerias/Javascript/media/css/demo_page.css" />    
        <link rel="stylesheet" type="text/css" href="../../../Librerias/Javascript/media/css/demo_table.css" /> 

/////////funcion del dataTables

<script type="text/javascript">
$('#myTable1').ready( function () {
                $('#myTable1').dataTable( {"aaSorting": [ [0,'desc']],
                    "bStateSave": true,
                    "aoColumns": [
                        { "sType": "num-html" }, 
                        { "sType": "num-html" },
                        { "sType": "num-html" },
                        { "sType": "num-html" }],
                    "oLanguage": {
                        "sLengthMenu": "Despliega _MENU_ registros por pagina",
                        "sZeroRecords": "No se encontraron registros - Lo sentimos",
                        "sInfo": "Mostrando _START_ a _END_ de _TOTAL_ registros",
                        "sInfoEmpty": "Mostrando 0 de 0 de 0 registros",
                        "sInfoFiltered": "(filtrado desde _MAX_ registros)"
                    },
                    "sDom": 'T<"clear">lfrtip',
                    "oTableTools": {
                        "sSwfPath" : "../../Librerias/TableTools/media/swf/copy_cvs_xls.swf"
                    }                
                } );

            } );
</script>




////////// funcion js que valida y envía a través de ajax a infotrabajador.jsp el valor de #busqueda, la cual es un area de texto.
<script type="text/javascript">
function validarFormulario(){
                if($('#busqueda').val()!=""){ 
                        var b = $('#busqueda').val(); //funcion js que valida el contenido de mi formulario 
                        var parameters = "busqueda="+b;
                        $.ajax({ 
                            url:'infotrabajador.jsp',    
                            type:'POST',    
                            async:true,    
                            data:parameters,    
                            success:function(data)
                            {
                                $('#myTable1').html(options); // id de mi tabla
                                //$('.busquedaEmp').flexigrid({ singleSelect: true});
                                $('#busqueda').focus();
                                //$('.grid').flexigrid({
                            }
                        });
                    
                }else{
                    alert("La busqueda no puede ser vacía, intentalo de nuevo.");
                    $('#busqueda').focus();
                }
            }
 </script>
////////////////// seccion del archivo tabla.jsp que muestra la tabla
<table id="myTable1" name="myTable" class="display">

</table> 
Sección de archivo infotrabajador.jsp que ejecuta la consulta y crea la tabla
Código PHP:
<%out.print("<thead>");
    
out.print("<tr>");
    
out.print("<th>NIP</th>");
    
out.print("<th>RFC</th>");
    
out.print("<th>CURP</th>");
    
out.print("<th>Nombre completo</th>");
    
out.print("</tr>");
    
out.print("</thead>");
    
out.print("<tbody>");

    
String busqueda request.getParameter("busqueda"); //aqui toma el valor de la busqueda enviada desde el formulario
    
List coincidencias null;

    try {
        
concentrado conc = new concentrado();
        
conc.setConexion(conection);
        
mantenimientoBean.setConexion(conection);
        
coincidencias mantenimientoBean.busqueda(busqueda);

        if (
coincidencias != null) {
            
Iterator iterator coincidencias.iterator();
            
concentrado regCon null;
            while (
iterator.hasNext()) {
                
regCon = (concentradoiterator.next();
                
regCon.setConexion(conection);
////aqui crea la tabla con lo que se trae de la consulta
                
out.print("<tr>");
                
out.print("<td><a href='verinfotrabajador.jsp?rfcEmp=" regCon.getRfc() +"'"+">" regCon.getNip() + "</a></td>");
                
out.print("<td><a href='verinfotrabajador.jsp?rfcEmp=" regCon.getRfc() +"'"+">" regCon.getRfc() + "</a></td>");
                
out.print("<td><a href='verinfotrabajador.jsp?rfcEmp=" regCon.getRfc() +"'"+">" regCon.getCurp() + "</a></td>");
                
out.print("<td><a href='verinfotrabajador.jsp?rfcEmp=" regCon.getRfc() + "class='manita'>" regCon.getNombreCompleto() + "</a></td>");
//verinfotrabajador.jsp es otra pagina
                
out.print("</tr>");
            }
//while
            
out.print("</tbody>");
        } else {
            
out.print("<p> no hay coincidencias con</p> " busqueda);
        }
    } catch (
Exception e) {
        
System.out.println("Error: " e);
    }
%> 
Efectivamente me crea la tabla con la información que resulta, el problema está cuando quiero aplicarle el DataTables, no funciona, me pone la tabla pero sin las funciones ni el css del grid, mi pregunta es si es posible esto que quiero hacer. Investigando llego al componente <list> que para el caso si logra hacerlo, pero yo necesito la tabla no la lista.

les agradezco colegas!
  #2 (permalink)  
Antiguo 17/04/2013, 15:20
 
Fecha de Ingreso: agosto-2012
Ubicación: Agüitas Ranch
Mensajes: 18
Antigüedad: 11 años, 7 meses
Puntos: 0
Desacuerdo Respuesta: Implementar grid 'DataTables' con resultado AJAX en JSP

Esto lo eh venido intendando desde hace 3 dias...

Eh intentado todo y nada parece funcionar...

agradecería su apoyo, por lo pronto me rindo buscaré mientras otros medios...

  #3 (permalink)  
Antiguo 17/04/2013, 17:23
 
Fecha de Ingreso: junio-2008
Ubicación: Colombia
Mensajes: 207
Antigüedad: 15 años, 9 meses
Puntos: 12
Respuesta: Implementar grid 'DataTables' con resultado AJAX en JSP

Esto parece ser un trabajo para livequery http://docs.jquery.com/Plugins/livequery, una vez descargado y cargado en tu pagina puedes usar algo como esto:

Código:
 $('#myTable1').livequery(function(){
      $(this).dataTable( {"aaSorting": [ [0,'desc']], 
                    "bStateSave": true, 
                    "aoColumns": [ 
                        { "sType": "num-html" },  
                        { "sType": "num-html" }, 
                        { "sType": "num-html" }, 
                        { "sType": "num-html" }], 
                    "oLanguage": { 
                        "sLengthMenu": "Despliega _MENU_ registros por pagina", 
                        "sZeroRecords": "No se encontraron registros - Lo sentimos", 
                        "sInfo": "Mostrando _START_ a _END_ de _TOTAL_ registros", 
                        "sInfoEmpty": "Mostrando 0 de 0 de 0 registros", 
                        "sInfoFiltered": "(filtrado desde _MAX_ registros)" 
                    }, 
                    "sDom": 'T<"clear">lfrtip', 
                    "oTableTools": { 
                        "sSwfPath" : "../../Librerias/TableTools/media/swf/copy_cvs_xls.swf" 
                    }                 
                } ); 

});
Algo que me tiene con duda es para que tienes esta linea

Código:
$('#myTable1').ready( function () { ......

Estoy casi seguro que deberia ir

$('document').ready( function () { ......
Espero te sirva, saludos.
  #4 (permalink)  
Antiguo 22/04/2013, 08:26
 
Fecha de Ingreso: agosto-2012
Ubicación: Agüitas Ranch
Mensajes: 18
Antigüedad: 11 años, 7 meses
Puntos: 0
Respuesta: Implementar grid 'DataTables' con resultado AJAX en JSP

Rosencrantz te agradezco la respuesta, voy a probar esto y te comento..
  #5 (permalink)  
Antiguo 11/07/2013, 11:52
 
Fecha de Ingreso: agosto-2012
Ubicación: Agüitas Ranch
Mensajes: 18
Antigüedad: 11 años, 7 meses
Puntos: 0
Respuesta: Implementar grid 'DataTables' con resultado AJAX en JSP

eh implementado el liveQuery y funciona de maravilla..

Perdón por responder tan tarde pero ese era un proyecto que había dejado de lado para sacar otro.
  #6 (permalink)  
Antiguo 11/07/2013, 12:00
Avatar de Reedyseth  
Fecha de Ingreso: enero-2009
Ubicación: Chihuahua, México
Mensajes: 419
Antigüedad: 15 años, 1 mes
Puntos: 36
Respuesta: Implementar grid 'DataTables' con resultado AJAX en JSP

Oh sin usar el plugin puedes usar una función que ya trae jQuery que es .live() (versión <= 1.7) o usar .on() (versión >= 1.7)
__________________
Reedyseth
Te ayudo? No olvides dar un +
blog:http://behstant.com/blog
En el blog:Tutoriales de Desarrollo Web PHP, Javascript, BD y más.
  #7 (permalink)  
Antiguo 11/07/2013, 13:07
 
Fecha de Ingreso: agosto-2012
Ubicación: Agüitas Ranch
Mensajes: 18
Antigüedad: 11 años, 7 meses
Puntos: 0
Respuesta: Implementar grid 'DataTables' con resultado AJAX en JSP

interesante.... muchas gracias!

Etiquetas: ajax, data, datatables, javascript, js, jsp, tables
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:28.