15/04/2011, 10:58
|
 | | | Fecha de Ingreso: junio-2008 Ubicación: Medellin
Mensajes: 89
Antigüedad: 15 años, 10 meses Puntos: 4 | |
 Respuesta: Tutorial JQuery DataTables
Cita:
Iniciado por Dany_s  ¿porqué se complican tanto al probar el plugin por primera vez utilizando lengueja de servidor y base de datos?
Primero lo tienen que hacer funcionar con datos estáticos, html + jquery + plugin
si no logran hacerlo funcionar posteen su código acá para que podamos ver el problema que tienen y ayudarlos.
Una vez que se ha solucionado ahi recien intenten agregar datos externos
No interesa que lenguaje o db usen, lo que recibe el plugin es un xml o json que también puede ser estático para probar. Tomando como consejo lo que decis... pues les posteo el cód. es algo simple... creo una tabla en el JSP y los datos los traigo desde un Servlet por ajax
consultaProyecto.jsp
Código:
<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<html>
<head>
<link href="css/simon.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/JavaScript">
//-->
/*Crea el objeto para enviar las peticiones al servidor.*/
var ajax;
function getAjaxObject(){
if( window.XMLHttpRequest ){
varAjax = new XMLHttpRequest(); // No Internet Explorer
}else{
varAjax = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer
}
return varAjax;
}
/*Ésta función se encarga de gestionar por medio del servlet ConsultarProyecto
la consulta de los datos.*/
function ConsultarProyectos(){
url = "ConsultarProyectost?";
/* Se capturan los datos del formulario*/
tipo = document.getElementById('cboTipo').value;
valor = document.getElementById('txtValor').value;
/* Se envian los datos a través del método POST*/
document.getElementById('imagen').innerHTML ='<img src="images/cargando.gif" name="Image3" width="50" height="50" border="0"/>';
ajax1 = getAjaxObject();
ajax1.open( 'POST',url, true );
ajax1.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
ajax1.send('cboTipo=' + escape(tipo)+ '&txtValor=' + escape(valor));
ajax1.onreadystatechange = procesarConsulta;
}
function procesarConsulta(){
if (ajax1.readyState==1 || ajax1.readyState==2 || ajax1.readyState==3) {
document.getElementById('imagen').innerHTML ='<img src="images/cargando.gif" name="Image3" width="50" height="50" border="0"/>';
}else if(ajax1.readyState == 4 ){
//status = 200 correctamente -- 404 no encuentra la pagina -- 500 problemas en el server
if( ajax1.status == 200 ){
document.getElementById('imagen').style.display='none';
respuesta = ajax1.responseText;
document.getElementById("ajax").innerHTML = respuesta;
}
}
}
</script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function() {
$('#prueba').dataTable({
"bServerSide": true,
"sAjaxSource": "ConsultarProyectost.java",
"bFilter": false,
"bPaginate": true,
"sPaginationType": "full_numbers",
"bLengthChange": true,
"bSort": true,
} );
});
</script>
<style type="text/css">
<!--
.Estilo6 {font-weight: bold}
.Estilo7 {font-weight: bold}
-->
</style>
</head>
<body>
<table width="626" border="0" align="center">
<tr>
<th scope="col"><p><img src="images/LOGOB.jpeg" width="276" height="115"></p></th>
</tr>
</table>
<table width="595" border="0" align="center">
<tr>
<th width="585" scope="col"><h1>CONSULTAR PROYECTO</h1></th>
</tr>
</table>
<table width="795" height="250" border="0" align="center" cellpadding=0 cellspacing=0 bordercolor="#EEEEEE" >
<tr>
<th width=22 height=25 background="images/Q1.jpg" scope="col"> </th>
<th width="750" background="images/tup.jpg" scope="col"> </th>
<th width=23 height=25 align="right" valign="top" background="images/Q2.jpg" scope="col"> </th>
</tr>
<tr>
<td height="60" background="images/tlft.jpg"> </td>
<td bgcolor="#EEEEEE">
<table width="719" height="177" border="0" align="center" bgcolor="#EEEEEE">
<tr>
<td width="352" class="tdcampos"><div align="center">TIPO CONSULTA </div></td>
<td width="357" colspan="2">
<select name="cboTipo" id="cboTipo">
<option value="direccion">DIRECCION</option>
<option value="nombre">NOMBRE PROYECTO</option>
</select> </td>
</tr>
<tr>
<td class="tdcampos"><div align="center">DATO A CONSULTAR </div></td>
<td colspan="2"><input name="txtValor" type="text" id="txtValor" size="30"/></td>
</tr>
<tr>
<td colspan="3"><div align="center">
<p>
<input type="button" name="Consultar" value="Consultar" onClick="ConsultarProyectos()">
</p>
<div align="center" id="imagen"></div>
<p>
<input type="button" name="Submit32" value="Salir" onClick="location.href='index.jsp'"/>
</p>
</div></td>
</tr>
</table>
</td>
<td background="images/tright.jpg"> </td>
</tr>
<tr>
<th width=22 height=25 align="left" valign="bottom" background="images/Q4.jpg" scope="col"> </th>
<td background="images/todwn.jpg"> </td>
<th width=23 height=25 background="images/Q3.jpg" scope="col"> </th>
</tr>
</table>
<p> </p>
<table width="1244" height="278" border="0" align="center" cellpadding=0 cellspacing=0 bordercolor="#EEEEEE" >
<tr>
<th width=15 height=18 background="images/Q1.jpg" scope="col"> </th>
<th width="1209" background="images/tup.jpg" scope="col"> </th>
<th width=20 height=18 align="right" valign="top" background="images/Q2.jpg" scope="col"> </th>
</tr>
<tr>
<td height="189" background="images/tlft.jpg"> </td>
<td bgcolor="#EEEEEE">
<table id="prueba" width="1200" border="0" align="center">
<tr>
<td width='131' rowspan='1' class='tdcampos Estilo6'><DIV align="center">NOMBRE</DIV><br></td>
<td width='130' rowspan='1' class='tdcampos Estilo6'><DIV align="center">DIRECCION</DIV><br></td>
<td width='82' rowspan='1' class='tdcampos Estilo6'><DIV align="center">RADICADO</DIV><br></td>
<td width='92' rowspan='1' class='tdcampos Estilo6'><DIV align="center">ESTADO</DIV><br></td>
<td width='102' rowspan='1' class='tdcampos Estilo6'><DIV align="center">PROFESIONAL</DIV><br></td>
<td width='83' rowspan='1' class='tdcampos Estilo7'><DIV align="center">ACTUALIZAR</DIV><br></td>
<tr>
<td colspan="14" id="ajax"> </td>
</tr>
</table>
<p> </p></td>
<td background="images/tright.jpg"> </td>
</tr>
<tr>
<th width=15 height=25 align="left" valign="bottom" background="images/Q4.jpg" scope="col"> </th>
<td background="images/todwn.jpg"> </td>
<th width=20 height=25 background="images/Q3.jpg" scope="col"> </th>
</tr>
</table>
</body>
</html>
Ahora lo que tengo en el servlet se los pongo en el siguiente post
__________________
Gabo Duk3
I.S |