Tutorial JQuery DataTables

gabrican · #1 (**permalink**) 14/04/2011, 12:51

Hola a todos... ando intentando usar el plugin de Jquery DataTables en mi aplicacion pero no he tenido exito....

Alguien me podria colaborar con algun tutorial en español o me podria regalar una ayudita con eso???

Thankxss

andrexsos17 · #2 (**permalink**) 14/04/2011, 13:09

Saludos, yo tambien ando en las mismas, deseo utilizar datatables con una consulta mysql pero naa, alguien a utilizado este plugin con php y msql para que nos oriente un poco... Gracias

caricatos · #3 (**permalink**) 14/04/2011, 15:42

Tema movido desde javascript

tinthenet · #4 (**permalink**) 14/04/2011, 16:43

Hola amigos, estoy en un proyecto PHP y Postgresql y lo hice funcionar de la siguiente manera:

yo bajé el DataTables version 1.7.5 y puse la carpeta en el proyecto con el nombre DataTables-1.7.5.
Primero les dejo el archivo que hace la conexión a la base de datos, ustedes cambien por sus datos:

db_connect.php

Código PHP:

  <?php 
    define ('DB_HOST','192.168.0.100'); // ip PC que tiene base de datos 
    define ('DB_USER','usuario'); // usuario base de datos 
    define ('DB_PASS','clave'); // contraseña base de datos 
    define ('DB_NAME','base_1'); // nombre base de datos 
    define ('DB_PORT','5432'); // puerto base de datos 
 
//$conn = pg_connect("user=".DB_USER." port=".DB_PORT." password=".DB_PASS." dbname=".DB_NAME." host=".DB_HOST); 
 
function execute_query ($sql){ 
    $conn = pg_connect("user=".DB_USER." port=".DB_PORT." password=".DB_PASS." dbname=".DB_NAME." host=".DB_HOST); 
 
    if (!$conn) { 
           echo 'Error while connecting to the database'; 
    } 
       $result = pg_query($conn,$sql); 
       if (!$result) { 
              echo "No se puede ejecutar el query: ".$sql; 
       } 
       else { 
              //nada, todo bien 
       } 
       return $result; 
} 
?>

Después cree un archivo, ponganle el nombre que quieran, con lo siguiente (modificar SQL y el PHP):

Código PHP:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
        <title> Listado x Obra </title> 
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" /> 
        <link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico"> 
 
        <style type="text/css" title="currentStyle"> 
            @import "DataTables-1.7.5/media/css/demo_page.css"; 
            @import "DataTables-1.7.5/media/css/demo_table_jui.css"; 
            @import "DataTables-1.7.5/examples/examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css"; 
            @import "DataTables-1.7.5/TableTools-2.0.0/media/css/TableTools.css"; 
            @import "DataTables-1.7.5/extras/ColVis/media/css/ColVis.css"; 
        </style> 
 
        <script type="text/javascript" charset="utf-8" src="DataTables-1.7.5/media/js/jquery.js"></script> 
        <script type="text/javascript" charset="utf-8" src="DataTables-1.7.5/media/js/jquery.dataTables.js"></script> 
        <script type="text/javascript" charset="utf-8" src="DataTables-1.7.5/TableTools-2.0.0/js/ZeroClipboard.js"></script> 
        <script type="text/javascript" charset="utf-8" src="DataTables-1.7.5/TableTools-2.0.0/js/TableTools.js"></script> 
        <script type="text/javascript" charset="utf-8" src="DataTables-1.7.5/extras/ColVis/media/js/ColVis.js"></script> 
        <script type="text/javascript" charset="utf-8"> 
var asInitVals = new Array(); 
 
    $(document).ready(function() { 
                    $('#example').dataTable({ 
                       "bJQueryUI": true, 
                    "sPaginationType": "full_numbers", 
                    "sDom": 'T C lfrtip', 
                    "oTableTools": { 
                    "sSwfPath": "/TableTools-2.0.0/media/swfcopy_cvs_xls_pdf.swf", 
                    "aButtons": [ 
                    "xls", 
                    "pdf", 
                    { 
                    "sExtends": "print", 
                    "sButtonText": "Imprimir", 
                    "sInfo": "<br><center><h1>PRESIONAR ESCAPE AL TERMINAR</h1></center>", 
                    "sMessage": "<center><h2><b>TITULO!</b></h2></center>", 
                    "sTitle": "Listado x Obra Social", 
                    } 
                    ], 
                    }, 
                    "fnInitComplete": function () { 
                        var 
                            that = this, 
                            nTrs = this.fnGetNodes(); 
                        $('td', nTrs).click( function () { 
                            that.fnFilter( this.innerHTML ); 
                        } ); 
                    }, 
                    "oLanguage": { 
"oPaginate": { 
"sPrevious": "Anterior", 
"sNext": "Siguiente", 
"sLast": "Ultima", 
"sFirst": "Primera" 
}, 
 
"sLengthMenu": 'Mostrar <select>'+ 
'<option value="10">10</option>'+ 
'<option value="20">20</option>'+ 
'<option value="30">30</option>'+ 
'<option value="40">40</option>'+ 
'<option value="50">50</option>'+ 
'<option value="-1">Todos</option>'+ 
'</select> registros', 
 
"sInfo": "Mostrando del _START_ a _END_ (Total: _TOTAL_ resultados)", 
 
"sInfoFiltered": " - filtrados de _MAX_ registros", 
 
"sInfoEmpty": "No hay resultados de búsqueda", 
 
"sZeroRecords": "No hay registros a mostrar", 
 
"sProcessing": "Espere, por favor...", 
 
"sSearch": "Buscar:", 
 
} 
                }); 
 
    $("tfoot input").keyup( function () { 
        /* Filter on the column (the index) of this element */ 
        oTable.fnFilter( this.value, $("tfoot input").index(this) ); 
    } ); 
 
 
    /* 
     * Support functions to provide a little bit of 'user friendlyness' to the textboxes in 
     * the footer 
     */ 
    $("tfoot input").each( function (i) { 
        asInitVals[i] = this.value; 
    } ); 
 
    $("tfoot input").focus( function () { 
        if ( this.className == "search_init" ) 
        { 
            this.className = ""; 
            this.value = ""; 
        } 
    } ); 
 
    $("tfoot input").blur( function (i) { 
        if ( this.value == "" ) 
        { 
            this.className = "search_init"; 
            this.value = asInitVals[$("tfoot input").index(this)]; 
        } 
    } ); 
            });  // Termina document.ready 
        </script> 
<style> 
.data_table { 
font-family: helvetica; 
font-size: 1px; 
} 
#top_of_page { 
position: absolute; 
} 
#main_table_area { 
position: absolute; 
top: 20px; 
height: 540px; 
width: 800px; 
overflow: auto; 
} 
</style> 
 
    </head> 
<?php 
// Arriba está el código de lo que va en el archivo include a continuación: 
include 'db_connect.php'; 
 
  $sql = "SELECT * FROM tabla"; 
 
  $result = execute_query($sql); 
 
// Pasa la fecha a español llamar FechaEsp($row['campo']); 
  function FechaESP ($fecha) { 
if ($fecha != '') { 
$data=explode("-",$fecha); 
$retfecha = substr($data[2],0,2).'/'.$data[1].'/'.$data[0]; 
return $retfecha; 
} else { 
$retfecha = ''; 
} 
} 
 
?> 
 
    <body id="dt_example"> 
 
 
 
            <div id="demo"> 
<font size=1> 
<div id="main_table_area"> 
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" class="data_table"> 
    <thead> 
        <tr> 
            <th width="auto">Titulo 1</th> 
            <th width="auto">Titulo 2</th> 
            <th width="auto">Titulo 3</th> 
            <th width="auto">Titulo 4</th> 
            <th width="auto">Titulo 5</th> 
            <th width="auto">Titulo 6</th> 
            <th width="auto">Titulo 7</th> 
        </tr> 
    </thead> 
    <tbody> 
     <?php 
       $i = 0; 
       $total = pg_num_rows($result); 
       while ($row = pg_fetch_array($result)) { 
           $i++; 
               echo "<tr class='gradeA'> 
            <td width='auto'>".$row['campo1']."</td> 
            <td width='auto' class='center'>".$row['campo2']."</td> 
            <td width='auto'>".$row['campo3']."</td> 
            <td width='auto'>".$row['campo4']."</td> 
            <td width='auto'>".$row['campo5']."</td> 
            <td width='auto'>".$row['campo6']."</td> 
            <td width='auto'>".$row['campo7']."</td> 
            </tr>"; 
       } 
       echo 'Total: ' . $total; 
      ?> 
    </tbody> 
</table> 
</div> 
</font> 
            </div> 
            <div class="spacer"></div> 
        </div> 
    </body> 
</html>

Espero les sirva, cualquier duda consulten.

Saludos.

gabrican · #5 (**permalink**) 15/04/2011, 07:46

Cita:

Iniciado por gabrican

Hola a todos... ando intentando usar el plugin de Jquery DataTables en mi aplicacion pero no he tenido exito....

Alguien me podria colaborar con algun tutorial en español o me podria regalar una ayudita con eso???

Thankxss

Por cierto se me olvidaba... trabajo con JAVA y BD ORACLE

Dany_s · #6 (**permalink**) 15/04/2011, 08:09

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

andrexsos17 · #7 (**permalink**) 15/04/2011, 10:14

@tinthenet ¡¡¡¡¡¡¡¡¡¡¡¡¡GRACIAS!!!!!!!!!!!!!!!!, genial funciono perfectamente, lo unico que cambie fue lo que dijiste el msql y PHP, de resto maravilloso.

Dany_s Gracias por el consejo, y si tienes un tuto de como manejarlo json seria excelente, pues al tener muchos datos se demora bastante la consulta para despues ordenarlos, entonces me gustaria paginar la consulta.

De todas maneras Gracias por interesarse y ayudarme. Saludos

gabrican · #8 (**permalink**) 15/04/2011, 10:58

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">&nbsp;</th>
	<th width="750" background="images/tup.jpg" scope="col">&nbsp;</th>
	<th width=23 height=25 align="right" valign="top" background="images/Q2.jpg" scope="col">&nbsp;</th>
  </tr>
  <tr>
	<td height="60" background="images/tlft.jpg">&nbsp;</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">&nbsp;</td>
  </tr>
  <tr>
	<th width=22 height=25 align="left" valign="bottom" background="images/Q4.jpg" scope="col">&nbsp;</th>
	<td background="images/todwn.jpg">&nbsp;</td>
	<th width=23 height=25 background="images/Q3.jpg" scope="col">&nbsp;</th>
  </tr>
</table>
<p>&nbsp;</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">&nbsp;</th>
    <th width="1209" background="images/tup.jpg" scope="col">&nbsp;</th>
    <th width=20 height=18 align="right" valign="top" background="images/Q2.jpg" scope="col">&nbsp;</th>
  </tr>
  <tr>
    <td height="189" background="images/tlft.jpg">&nbsp;</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">&nbsp;</td>
        </tr>
    </table>
    <p>&nbsp;</p></td>
    <td background="images/tright.jpg">&nbsp;</td>
  </tr>
  <tr>
    <th width=15 height=25 align="left" valign="bottom" background="images/Q4.jpg" scope="col">&nbsp;</th>
    <td background="images/todwn.jpg">&nbsp;</td>
    <th width=20 height=25 background="images/Q3.jpg" scope="col">&nbsp;</th>
  </tr>
</table>
</body>
</html>

Ahora lo que tengo en el servlet se los pongo en el siguiente post

gabrican · #9 (**permalink**) 15/04/2011, 11:00

Cita:

Iniciado por gabrican

Ahora lo que tengo en el servlet se los pongo en el siguiente post

El servlet contiene:

ConsultarProyectost.java

Código:

package servlets;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
import java.util.Vector;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import daos.ProyectoDAO;
import exceptions.ConnectionException;

/**
 * El Servlet ConsultarProyectost se encarga de consultar en la base de datos
 * la informacion de un determinado proyecto
 * @author Gabriel Jaime Duque Lopez
 * @version 1.00 2010/09/09
 * @since  JDK 1.4.2_13
 */
public class ConsultarProyectost extends HttpServlet {	
	
	public ConsultarProyectost() {
		super();
	}   	
	
	/**
	 * Procesa las solicitudes HTTP realizadas a traves de los metodos GET y POST
	 * @param request  Solicitud del servlet
	 * @param response Respuesta del servlet
	 * @throws ServletException 	Si el recurso destino lanza esta excepcion
	 * @throws IOException			Si el recurso destino lanza esta excepcion
	 * @throws ParseException 
	 */	
	protected void processRequest(HttpServletRequest request, HttpServletResponse response) 
	throws ServletException, IOException, SQLException {
		
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
		ProyectoDAO prydao = new ProyectoDAO();
					
		try{	
			String tipo = request.getParameter("cboTipo");	
			String dato = request.getParameter("txtValor");
			
			if (tipo.equals("nombre")){
				Vector proyectos = prydao.consultarProyecton(dato);
				
				StringBuffer tabla = new StringBuffer(); /* StringBuffer representa una cadena cuyo tamano puede variar.*/
			
				if(proyectos.size() == 0){
					tabla.append("<td class='consultas'>No se encontraron registros!!</td>");
					out.print(tabla.toString());
					return;
				}

				tabla.append("<table border='0' id='ajax' width='1200'>");
			
				for (int i=0; i < proyectos.size(); i ++){
				
					ProyectoDTO pdto = (ProyectoDTO) proyectos.elementAt(i);
					int idpro = pdto.getId_proyecto();
				
									
					/* muestra la informacion de la BD*/
					tabla.append("<tr><td width='131'><label for='"+pdto.getStr_nombre_pro()+"'>"
					+pdto.getStr_nombre_pro()+"</label></td>"+
					"<td width='130'><label for='"+pdto.getStr_direccion_pro()+"'>"
					+pdto.getStr_direccion_pro()+"</label></td>"+
					"<td width='82'><label for='"+pdto.getStr_radicado_pro()+"'>"
					+pdto.getStr_radicado_pro()+"</label></td>"+
					"<td width='92'><label for='"+pdto.getStr_estado_pro()+"'>"
					+pdto.getStr_estado_pro()+"</label></td>"+
					"<td width='102'><label for='"+pdto.getStr_encargado_pro()+"'>"
					+pdto.getStr_encargado_pro()+"</label></td>"+
					
					"<td width='83'><strong><label for='Actualizar'><a href='actualizaProyecto.jsp?id="+ pdto.getId_proyecto()+"' target='_blank'><img src='images/actualiza.png' border='0'></a></label></strong></td>");
					
										}
					tabla.append("</strong></td>");
				}

				tabla.append("</table>"); 
				tabla.append("<div><td class='consultas'>Numero de Registros:"+proyectos.size()+"</td></div>"); 
				out.print(tabla.toString());
				out.close();
}
			
		/*En caso de que se produzca una excepcion */	

		}catch(ConnectionException ex){
			ex.printStackTrace();
		}
	}

	protected void doGet(HttpServletRequest request, HttpServletResponse response) 
	throws ServletException, IOException{
	
		try {
			processRequest(request, response);
		} catch (ServletException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) 
	throws ServletException, IOException{
	
		try {
			processRequest(request, response);
		} catch (ServletException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}   	  	  	    
}

Dany_s · #10 (**permalink**) 15/04/2011, 13:53

en la doc hay ejemplos para varios lenguajes de servidor de cómo obtener los parámetros pasados por url y realizar la consulta para obtener resultados para la paginación

http://www.datatables.net/development/server-side/

andrexsos17 · #11 (**permalink**) 15/04/2011, 16:06

@Dany_s gracias por la info, soy malo pa el ingles pero buscaré como, te reitero mis agradecimientos, ahora ando buscando como hacer para cargalos mas rapido ps se demora 1 minuto por cada 2000 registros y ps no es la idea.

andrexsos17 · #12 (**permalink**) 15/04/2011, 18:36

Hola de nuevo, estoy muy contento con este plugin me fascina, pero naa de logro que sea mas rapida la carga de datos, se me ocurrrio que ordene por todas las columnas, tambien que no busque en todas las columnas, pero no se que parametros tengo que usar si alguno sabe cual es me encantaria que me lo dijeran o por lo menos saber en donde buscar.

gabrican · #13 (**permalink**) 27/04/2011, 09:35

Cita:

Iniciado por andrexsos17

Hola de nuevo, estoy muy contento con este plugin me fascina, pero naa de logro que sea mas rapida la carga de datos, se me ocurrrio que ordene por todas las columnas, tambien que no busque en todas las columnas, pero no se que parametros tengo que usar si alguno sabe cual es me encantaria que me lo dijeran o por lo menos saber en donde buscar.

Bro... Como hiciste que te funcionara... yo he intentado por todas las formas posibles y no he podido... podes postear algun ejemplo de tu cod o algo asi para poderme guiar??

andrexsos17 · #14 (**permalink**) 27/04/2011, 10:14

@gabrican es sencillo, mira el post de tinthenet de acuerdo a ese hice, mio, debes detener en cuenta que ese ejemplo esta con php y postgres(y para acceder a la bd es diferente en postgres que en mysql), tambien en el ten encuenta la conexion con tu bd y que que tengas bn las rutas de los archivos solicitados,

Saludos.

gabrican · #15 (**permalink**) 03/05/2011, 09:01

Cita:

Iniciado por andrexsos17

@gabrican es sencillo, mira el post de tinthenet de acuerdo a ese hice, mio, debes detener en cuenta que ese ejemplo esta con php y postgres(y para acceder a la bd es diferente en postgres que en mysql), tambien en el ten encuenta la conexion con tu bd y que que tengas bn las rutas de los archivos solicitados,

Saludos.

@andrexsos17
La verdad lo intento y los datos no cargan... no se que será lo que pasa... yo la conex la hago por medio de un DAO y los datos los traigo desde un servlet por medio de ajax, la verdad no se que pasa... de todas formas les posteo el cod, si me pueden ayudar... se los agradecería...

JSP:

Código:

<script type="text/javascript" charset="utf-8"> 
			$(document).ready(function() {
				$('#example').dataTable( {
					"aaSorting": [[ 1, "desc" ]],
					"bPaginate": true,
					"bLengthChange": true,
					"bFilter": true,
					"bSort": true,
					"bInfo": true,
					"bJQueryUI": true,
					"bAutoWidth": true } );
			} );

/*Ésta función se encarga de gestionar por medio del servlet ConsultarProyecto
			la consulta de los datos.*/ 
			function ConsultarProyectos(){
				url = "PruebaConsulta?";
				/* 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>
<style type="text/css" title="currentStyle"> 
			@import "css/demo_page.css";
			@import "css/demo_table.css";
			@import "css/simon.css";
		</style>

Código:

 <table cellpadding="0" cellspacing="0" border="0" class="display" id="example" align="center">
					<thead>
						<tr>
							<th class='tdcampos Estilo7'>NOMBRE</th>
							<th class='tdcampos Estilo7'>DIRECCION</th>
							<th class='tdcampos Estilo7'>RADICADO</th>
							<th class='tdcampos Estilo7'>ESTADO</th>
							<th class='tdcampos Estilo7'>PROFESIONAL</th>
						</tr>
					</thead>
					<tbody id="ajax">
						
					</tbody>
				</table>

y el servlet contiene esto:

Código:

for (int i=0; i < proyectos.size(); i ++){
				
					ProyectoDTO pdto = (ProyectoDTO) proyectos.elementAt(i);

					/* muestra la informacion de la BD*/
					tabla.append("<tr class='gradeA' id='ajax'>" +
					"<td width='auto'><label for='"+pdto.getStr_nombre_pro()+"'>"
					+pdto.getStr_nombre_pro()+"</label></td>"+
					"<td width='auto'><label for='"+pdto.getStr_direccion_pro()+"'>"
					+pdto.getStr_direccion_pro()+"</label></td>"+
					"<td width='auto'><label for='"+pdto.getStr_radicado_pro()+"'>"
					+pdto.getStr_radicado_pro()+"</label></td>"+
					"<td width='auto'><label for='"+pdto.getStr_estado_pro()+"'>"
					+pdto.getStr_estado_pro()+"</label></td>"+
					"<td width='auto'><label for='"+pdto.getStr_encargado_pro()+"'>"
					+pdto.getStr_encargado_pro()+"</label></td>" +
					"</tr>");
				}

				out.print(tabla.toString());
				out.close();

Does anybody can help meeeeeeeeee!!!!!!!!!

doylelives · #16 (**permalink**) 03/05/2011, 09:11

Hola, datatables es una maravilla, al igual que jquery.
Estas usando ajax? porque no usas jquery para tal transacción? en ves de usar el objeto "XMLHttpRequest"??
usa $.ajax y gran parte de tu problemas solucionado.
Lo importante es separar en partes, jquery no está atado a ningun lenguaje de servidor, o base de datos.
Si yo logré levantar datos de Sql server 2008 se puede todo! usa $.ajax e intente los sig pasos de obtener datos del server, y me cuentas!!

gabrican · #17 (**permalink**) 03/05/2011, 09:17

Cita:

Iniciado por doylelives

Hola, datatables es una maravilla, al igual que jquery.
Estas usando ajax? porque no usas jquery para tal transacción? en ves de usar el objeto "XMLHttpRequest"??
usa $.ajax y gran parte de tu problemas solucionado.
Lo importante es separar en partes, jquery no está atado a ningun lenguaje de servidor, o base de datos.
Si yo logré levantar datos de Sql server 2008 se puede todo! usa $.ajax e intente los sig pasos de obtener datos del server, y me cuentas!!

Bro... antes que todo mil gracias por el aporte...
Yo la verdad ando algo alcanzado con este tema... y no se como podria hacer lo que decís... me podes colaborar indicandome como cambiaria el cod???
Disculpa la molestia... pero la verdad la relacion entre ajax y yo es corta

doylelives · #18 (**permalink**) 03/05/2011, 10:38

Ok en primer lugar simplifiquemos el code, a su vez altamente recomiendo el uso de firebug para ayudar a depurar los errores.
Datatables(DD) puede ejecutar el pedido de datos al server, usando ajax.
$(document).ready( function () {
$('#example').dataTable( {
"bProcessing": false,
"sAjaxSource": "file.php"
} );
} );
Una vez que la pagina ya esta cargada, DD ejecuta la llamada ajax al server buscando datos, en el parametro sAjaxSource le indicas de que archivo obtienes los datos. Como se debe paginar los registros, DD ya envia parametros en el request ajax por si solo, tu no tienes que definir que datos se enviarán(en principio).
http://www.datatables.net/developmen...ide/php_oracle
http://www.datatables.net/developmen...side/php_mysql
http://www.datatables.net/developmen...ide/php_mysql4
dependiendo que base de datos uses, deberias adaptar la forma en que recuperas los datos y como paso final encapsularlos en un objecto json.
Dentro de ese objeto json le devuelves variables como los registros a mostrar en pantalla asi como datos para uso interno del propio DD.

gabrican · #19 (**permalink**) 03/05/2011, 11:05

Cita:

Iniciado por doylelives

Ok en primer lugar simplifiquemos el code, a su vez altamente recomiendo el uso de firebug para ayudar a depurar los errores.
Datatables(DD) puede ejecutar el pedido de datos al server, usando ajax.
$(document).ready( function () {
$('#example').dataTable( {
"bProcessing": false,
"sAjaxSource": "file.php"
} );
} );
Una vez que la pagina ya esta cargada, DD ejecuta la llamada ajax al server buscando datos, en el parametro sAjaxSource le indicas de que archivo obtienes los datos. Como se debe paginar los registros, DD ya envia parametros en el request ajax por si solo, tu no tienes que definir que datos se enviarán(en principio).
http://www.datatables.net/developmen...ide/php_oracle
http://www.datatables.net/developmen...side/php_mysql
http://www.datatables.net/developmen...ide/php_mysql4
dependiendo que base de datos uses, deberias adaptar la forma en que recuperas los datos y como paso final encapsularlos en un objecto json.
Dentro de ese objeto json le devuelves variables como los registros a mostrar en pantalla asi como datos para uso interno del propio DD.

Doylelives... tks por responder...
Te explico un poco el formulario que estoy usando...
En la parte central tengo un select y un campo de texto donde el usr selecciona el tipo de busqueda y en el txt ingresa la informacion, tengo un boton que hace la llamada a una funcion ConsultarProyectos() que creo que ya viste en el anterior post... Esta funcion va a un servlet que ese a su vez realiza la consulta al DAO donde me trae la informacion... al servlet, este dibuja la tabla y la envia al JSP el cual la recibe a traves de ajax... todo se "comprime" en la variable denominada "ajax" y se dibuja en el sitio especificado con id="ajax" debajo del boton.

Siendo asi... lo que he intentado es poner el datatable debajo del boton para que cuando realice la consulta me muestre la informacion que antes traía como una tabla comun y silvestre, he intentado poniendo un <tr> con id="ajax" y no funciona... probe con una tabla incluida con ese mismo nombre y tampoco... intenté poner el <tbody id="ajax"> y menos...

En la funcion del datatable intenté poner sAjaxSource e indicar la ruta en la cual está el servlet para que cargue la informacion de alli y eliminé de todas partes el id="ajax" y tampoco... estoy que lo doy!!!!!!

Que estoy haciendo mal... alguien me puede decir???

doylelives · #20 (**permalink**) 03/05/2011, 11:27

En realidad creo que todo lo de filtrar por nombre de proyecto etc, está contemplado por DD

Código Javascript:

Ver originalhttp://www.datatables.net/examples/basic_init/zero_config.html

Alli puedes ver como filtra a medida que ingresas texto.
A su vez mirar la estructura del <table> , el id que usa el DD
$('#example').dataTable( {
Es el id del table.
Tambien DEBES tener una estructura en html del thead en funcion de los datos que vas a mostrar. Eso es estatico si o si, luego DD los llenara con datos.
Si el sAjaxSource no es correcto, por firebug podras ver el error que muestra y ver por donde viene el problema.
Recuerda que debes simplificar las cosas.

gabrican · #21 (**permalink**) 05/05/2011, 07:23

Cita:

Iniciado por doylelives

En realidad creo que todo lo de filtrar por nombre de proyecto etc, está contemplado por DD

Código Javascript:

Ver originalhttp://www.datatables.net/examples/basic_init/zero_config.html

Alli puedes ver como filtra a medida que ingresas texto.
A su vez mirar la estructura del <table> , el id que usa el DD
$('#example').dataTable( {
Es el id del table.
Tambien DEBES tener una estructura en html del thead en funcion de los datos que vas a mostrar. Eso es estatico si o si, luego DD los llenara con datos.
Si el sAjaxSource no es correcto, por firebug podras ver el error que muestra y ver por donde viene el problema.
Recuerda que debes simplificar las cosas.

Man... tengo toda la estructura full formada...
Estoy haciendo la prueba con datos "quemados" directamente en el JSP y funciona, pero al momento de cargar la informacion de la consulta, ya no funciona...

Una pregunta... si yo creo la tabla con todo el esquema en el servlet... es decir:

Código:

if(proyectos.size() == 0){
					tabla.append("<td class='consultas'>No se encontraron registros!!</td>");
					out.print(tabla.toString());
					return;
				}

				tabla.append("<table border='0' id='example'>");
				tabla.append("<thead>");
				tabla.append("<td class='tdcampos' align='center' rowspan='1' width='100'>Nombre<br></td>");
				tabla.append("<td class='tdcampos' align='center' rowspan='1' width='100'>Direccion<br></td>");
				tabla.append("<td class='tdcampos'align='center' rowspan='1' width='100'>Radicado<br></td>");
				tabla.append("<td class='tdcampos'align='center' rowspan='1' width='100'>Estado<br></td>");
				tabla.append("<td class='tdcampos'align='center' rowspan='1' width='100'>Profesional<br></td>");
				tabla.append("</thead>"); 
				
				for (int i=0; i < proyectos.size(); i ++){
				
					ProyectoDTO pdto = (ProyectoDTO) proyectos.elementAt(i);

					/* muestra la informacion de la BD*/
					
					tabla.append("<tbody>");
					tabla.append("<tr class='gradeA'>" +
					"<td width='auto'><label for='"+pdto.getStr_nombre_pro()+"'>"
					+pdto.getStr_nombre_pro()+"</label></td>"+
					"<td width='auto'><label for='"+pdto.getStr_direccion_pro()+"'>"
					+pdto.getStr_direccion_pro()+"</label></td>"+
					"<td width='auto'><label for='"+pdto.getStr_radicado_pro()+"'>"
					+pdto.getStr_radicado_pro()+"</label></td>"+
					"<td width='auto'><label for='"+pdto.getStr_estado_pro()+"'>"
					+pdto.getStr_estado_pro()+"</label></td>"+
					"<td width='auto'><label for='"+pdto.getStr_encargado_pro()+"'>"
					+pdto.getStr_encargado_pro()+"</label></td></tr></tbody>");
				}
				tabla.append("</table>"); 
				out.print(tabla.toString());
				out.close();

No se supone que esto debería de funcionar si yo hago un llamado a la funcion del datatable, es decir, si yo cambio el document.ready y lo convierto en una funcion javascript y al momento de realizar la consulta haga el llamado a esa funcion???

O sigo equivocado, ya que por ninguna parte funciona!!!!! que shhiiiiiiiiiittttttttttt

doylelives · #22 (**permalink**) 05/05/2011, 07:53

Cita:

Estoy haciendo la prueba con datos "quemados" directamente en el JSP y funciona

A que te refieres con que funciona?
Tu servlet crea una pagina html no? entonces éste debe crear una estructura de table vacia para el DD, nada mas. Luego en el document.ready de jquery se usa el "constructor" de DD. Por ajax traer los registros puros (es decir nada de html los debes almacenar en un json), y los popula en el table automaticamente.

Que error lanza firebug?

doylelives · #23 (**permalink**) 05/05/2011, 07:54

La estructura inicial del table seria algo asi:

Código Javascript:

Ver original<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
    <thead>
        <tr>
            <th width="20%">Rendering engine</th>
            <th width="25%">Browser</th>
            <th width="25%">Platform(s)</th>
            <th width="15%">Engine version</th>
            <th width="15%">CSS grade</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="5" class="dataTables_empty">Loading data from server</td>
        </tr>
    </tbody>
</table>

gabrican · #24 (**permalink**) 05/05/2011, 17:59

Cita:

Iniciado por doylelives

La estructura inicial del table seria algo asi:

Código Javascript:

Ver original<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
    <thead>
        <tr>
            <th width="20%">Rendering engine</th>
            <th width="25%">Browser</th>
            <th width="25%">Platform(s)</th>
            <th width="15%">Engine version</th>
            <th width="15%">CSS grade</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="5" class="dataTables_empty">Loading data from server</td>
        </tr>
    </tbody>
</table>

Asi tengo el JSP... tal cual lo acabas de poner... lo que no he podido es direccionar o traer los datos a traves de ajax...
Cuando mencionas lo de JSON... parce.. quede nulo... porque la verdad nunca lo he manejado...
Para traer mis datos practicamente creo tanto la estructura como la informacion en el servlet, aunque esta vez opte porque solo trajera los datos...
Al verificar el firebug me aparece el error que dice "la variable K no esta definida" y es un error del plugin

doylelives · #25 (**permalink**) 06/05/2011, 07:52

Cita:

Para traer mis datos practicamente creo tanto la estructura como la informacion en el servlet,

?¿? El servlet en principio solo debe crear la estructura vacia, no debe traer datos, ningún registros, eso lo hace el DD en el ready() a traves de ajax. Recien alli se traen los datos.
No creo que sea error del plugin, no recuerdo que use una variable k.
Json es solo una manera de encapsular datos, con tu lenguaje de servidor debes crear dicha estructura de json como si fuese un string,
el tema de las llaves, corchetes, comillas,etc de manera que quede un string similar a este(lo tabulé de manera que quede leible):

Código Javascript:

Ver original{//Un simple ejemplo del objeto json que espera DD(dataTables)
    "sEcho": 1,
    "iTotalRecords": 100, 
    "iTotalDisplayRecords": 10, 
    "aaData": [ 
            [
                "Nombre1",//Campo que corresponde a la 1º columna del datatable
                "Apellido1",//Campo que corresponde a la 2º columna del datatable
                "Direccion1"//Campo que corresponde a la 3º columna del datatable
            ],
            [
                "Nombre2",//Campo que corresponde a la 1º columna del datatable
                "Apellido2",//Campo que corresponde a la 2º columna del datatable
                "Direccion2"
            ],
            [
                "Nombre3",
                "Apellido3",
                "Direccion3"
            ]
        ] 
   }

La variable aaData se crea bucleando los registros de la BD, un while loopeando los registros y adentro un for para recorrer los campos de cada registro para obtener el campo que corresponda a la columna que le corresponda.
Todo este string debe ser devuelto del servidor. Luego DD lo interpreta y lo mostrará por pantalla

adnto · #26 (**permalink**) 19/07/2011, 23:03

disculpen yo tengo un problema muestros mis datos en la tabla jalandolos de un json, pero ahora quiero agregar una columna con un boton, al generar me marca un error [object HTMLButtonElement]
Mi código:
var eliminar=document.createElement('button')
eliminar.type='button';
var imagen=document.createElement('img');
imagen.src='prueba.png';
eliminar.appendChild(imagen);

$('#example').dataTable().fnAddData( [
nombre,
apellido,
eliminar
] );

nombre y apellido los jala bien por que son string.
He leído http://www.datatables.net/release-datatables/examples/plug-ins/html_sort.html
pero la verdad soy nueva y no logro comprender, gracias
Necesito su ayuda por favor

sara_edith_p · #27 (**permalink**) 25/08/2011, 09:50

Hola AndreXsos 17

Oye, tu haz logrado hacer que sea más veloz la carga con el API ? . Es decir; tengo como 10000 registros en mi tabla y se hace un poco lento la carga. Si encontraste una solución. De favor podrías pasarme el tip, es que ya me cansé de buscar por todas las páginas y no doy con el detalle. A mi me parece también genial la herramienta, yo solo la estoy implementando con HTML y si funciona a la perfección, pero si es lenta

Saludos!!

doylelives · #28 (**permalink**) 29/08/2011, 19:51

10000 registros?! debes paginar los resultados y traerlos mediante ajax.

jajaramillo28 · #29 (**permalink**) 05/03/2012, 08:55

Si alguien todavia necesita ayuda con este tema, me envian un mensaje y les dare una forma muy util de hacerlo

khazid · #30 (**permalink**) 14/03/2012, 11:45

Buenas

Tengo un problema con el datatable, al momento de que necesito insertar dos campos de la BD que tienen el mismo nombre el datatable me muestra en los dos campos la misma informacion, como si no diferenciara que los campos provienen de tablas distintas.

Por ejemplo :

Tengo 2 tablas (result,process) con las cuales realizo inner join y necesito traerme el campo "tipo" de las dos tablas (result.tipo , process.tipo) pero al mostrarlo en el datatable me muestra los dos campos con la informacion de result.tipo y no se ve la informacion de process.tipo.

Intente colocando un Alias en el query para el campo process.tipo pero el datatable se queda en loading data y no arroja ningun resultado.

Verifique que el query estuviera correcto tambien con el alias.

No se si saben como solucionar esto cuando se tienen dos campos de la bd con el mismo nombre.

Cualquier ayuda sera bien recibida.

Gracias