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!