Ver Mensaje Individual
  #1 (permalink)  
Antiguo 17/04/2013, 14:15
nomarlegnar
 
Fecha de Ingreso: agosto-2012
Ubicación: Agüitas Ranch
Mensajes: 18
Antigüedad: 10 años
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!