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

[nomarlegnar]

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 = (concentrado) iterator.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!

[nomarlegnar]

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...

[Rosencrantz]

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.

[nomarlegnar]

Rosencrantz te agradezco la respuesta, voy a probar esto y te comento..

[nomarlegnar]

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.

[Reedyseth]

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)

[nomarlegnar]

interesante.... muchas gracias!