Foros del Web » Programando para Internet » Jquery »

Tutorial JQuery DataTables

Estas en el tema de Tutorial JQuery DataTables en el foro de Jquery en Foros del Web. 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 ...

  #1 (permalink)  
Antiguo 14/04/2011, 13:51
Avatar de gabrican  
Fecha de Ingreso: junio-2008
Ubicación: Medellin
Mensajes: 89
Antigüedad: 11 años, 8 meses
Puntos: 4
Información Tutorial JQuery DataTables

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
__________________
Gabo Duk3
I.S
  #2 (permalink)  
Antiguo 14/04/2011, 14:09
Avatar de andrexsos17  
Fecha de Ingreso: enero-2011
Ubicación: Manizales
Mensajes: 169
Antigüedad: 9 años, 1 mes
Puntos: 15
Respuesta: Tutorial JQuery DataTables

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
  #3 (permalink)  
Antiguo 14/04/2011, 16:42
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.596
Antigüedad: 17 años, 10 meses
Puntos: 1279
Tema movido desde javascript
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #4 (permalink)  
Antiguo 14/04/2011, 17:43
 
Fecha de Ingreso: septiembre-2008
Mensajes: 35
Antigüedad: 11 años, 4 meses
Puntos: 6
Respuesta: Tutorial JQuery DataTables

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.
  #5 (permalink)  
Antiguo 15/04/2011, 08:46
Avatar de gabrican  
Fecha de Ingreso: junio-2008
Ubicación: Medellin
Mensajes: 89
Antigüedad: 11 años, 8 meses
Puntos: 4
Respuesta: Tutorial JQuery DataTables

Cita:
Iniciado por gabrican Ver Mensaje
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
__________________
Gabo Duk3
I.S
  #6 (permalink)  
Antiguo 15/04/2011, 09:09
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 10 años, 2 meses
Puntos: 65
Respuesta: Tutorial JQuery DataTables

¿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.
  #7 (permalink)  
Antiguo 15/04/2011, 11:14
Avatar de andrexsos17  
Fecha de Ingreso: enero-2011
Ubicación: Manizales
Mensajes: 169
Antigüedad: 9 años, 1 mes
Puntos: 15
Respuesta: Tutorial JQuery DataTables

@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
  #8 (permalink)  
Antiguo 15/04/2011, 11:58
Avatar de gabrican  
Fecha de Ingreso: junio-2008
Ubicación: Medellin
Mensajes: 89
Antigüedad: 11 años, 8 meses
Puntos: 4
Busqueda Respuesta: Tutorial JQuery DataTables

Cita:
Iniciado por Dany_s Ver Mensaje
¿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
__________________
Gabo Duk3
I.S
  #9 (permalink)  
Antiguo 15/04/2011, 12:00
Avatar de gabrican  
Fecha de Ingreso: junio-2008
Ubicación: Medellin
Mensajes: 89
Antigüedad: 11 años, 8 meses
Puntos: 4
Busqueda Respuesta: Tutorial JQuery DataTables

Cita:
Iniciado por gabrican Ver Mensaje
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();
		}
	}   	  	  	    
}
__________________
Gabo Duk3
I.S
  #10 (permalink)  
Antiguo 15/04/2011, 14:53
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 10 años, 2 meses
Puntos: 65
Respuesta: Tutorial JQuery DataTables

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/
  #11 (permalink)  
Antiguo 15/04/2011, 17:06
Avatar de andrexsos17  
Fecha de Ingreso: enero-2011
Ubicación: Manizales
Mensajes: 169
Antigüedad: 9 años, 1 mes
Puntos: 15
Respuesta: Tutorial JQuery DataTables

@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.
  #12 (permalink)  
Antiguo 15/04/2011, 19:36
Avatar de andrexsos17  
Fecha de Ingreso: enero-2011
Ubicación: Manizales
Mensajes: 169
Antigüedad: 9 años, 1 mes
Puntos: 15
Respuesta: Tutorial JQuery DataTables

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.
  #13 (permalink)  
Antiguo 27/04/2011, 10:35
Avatar de gabrican  
Fecha de Ingreso: junio-2008
Ubicación: Medellin
Mensajes: 89
Antigüedad: 11 años, 8 meses
Puntos: 4
Respuesta: Tutorial JQuery DataTables

Cita:
Iniciado por andrexsos17 Ver Mensaje
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??
__________________
Gabo Duk3
I.S
  #14 (permalink)  
Antiguo 27/04/2011, 11:14
Avatar de andrexsos17  
Fecha de Ingreso: enero-2011
Ubicación: Manizales
Mensajes: 169
Antigüedad: 9 años, 1 mes
Puntos: 15
Respuesta: Tutorial JQuery DataTables

@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.
__________________
Todo problema es una forma mental que la mente sostiene. Los problemas dejan de existir cuando los olvidamos. Todo problema ha sido creado por la mente y existe mientras la mente lo sostenga.
  #15 (permalink)  
Antiguo 03/05/2011, 10:01
Avatar de gabrican  
Fecha de Ingreso: junio-2008
Ubicación: Medellin
Mensajes: 89
Antigüedad: 11 años, 8 meses
Puntos: 4
Respuesta: Tutorial JQuery DataTables

Cita:
Iniciado por andrexsos17 Ver Mensaje
@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!!!!!!!!!
__________________
Gabo Duk3
I.S
  #16 (permalink)  
Antiguo 03/05/2011, 10:11
 
Fecha de Ingreso: junio-2008
Ubicación: Capital Federal xD
Mensajes: 1.208
Antigüedad: 11 años, 8 meses
Puntos: 35
Respuesta: Tutorial JQuery DataTables

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!!
__________________
I am Doyle please insert code.
  #17 (permalink)  
Antiguo 03/05/2011, 10:17
Avatar de gabrican  
Fecha de Ingreso: junio-2008
Ubicación: Medellin
Mensajes: 89
Antigüedad: 11 años, 8 meses
Puntos: 4
Respuesta: Tutorial JQuery DataTables

Cita:
Iniciado por doylelives Ver Mensaje
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
__________________
Gabo Duk3
I.S
  #18 (permalink)  
Antiguo 03/05/2011, 11:38
 
Fecha de Ingreso: junio-2008
Ubicación: Capital Federal xD
Mensajes: 1.208
Antigüedad: 11 años, 8 meses
Puntos: 35
Respuesta: Tutorial JQuery DataTables

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.
__________________
I am Doyle please insert code.
  #19 (permalink)  
Antiguo 03/05/2011, 12:05
Avatar de gabrican  
Fecha de Ingreso: junio-2008
Ubicación: Medellin
Mensajes: 89
Antigüedad: 11 años, 8 meses
Puntos: 4
Respuesta: Tutorial JQuery DataTables

Cita:
Iniciado por doylelives Ver Mensaje
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???
__________________
Gabo Duk3
I.S
  #20 (permalink)  
Antiguo 03/05/2011, 12:27
 
Fecha de Ingreso: junio-2008
Ubicación: Capital Federal xD
Mensajes: 1.208
Antigüedad: 11 años, 8 meses
Puntos: 35
Respuesta: Tutorial JQuery DataTables

En realidad creo que todo lo de filtrar por nombre de proyecto etc, está contemplado por DD
Código Javascript:
Ver original
  1. http://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.
__________________
I am Doyle please insert code.
  #21 (permalink)  
Antiguo 05/05/2011, 08:23
Avatar de gabrican  
Fecha de Ingreso: junio-2008
Ubicación: Medellin
Mensajes: 89
Antigüedad: 11 años, 8 meses
Puntos: 4
Respuesta: Tutorial JQuery DataTables

Cita:
Iniciado por doylelives Ver Mensaje
En realidad creo que todo lo de filtrar por nombre de proyecto etc, está contemplado por DD
Código Javascript:
Ver original
  1. http://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
__________________
Gabo Duk3
I.S
  #22 (permalink)  
Antiguo 05/05/2011, 08:53
 
Fecha de Ingreso: junio-2008
Ubicación: Capital Federal xD
Mensajes: 1.208
Antigüedad: 11 años, 8 meses
Puntos: 35
Respuesta: Tutorial JQuery DataTables

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?
__________________
I am Doyle please insert code.
  #23 (permalink)  
Antiguo 05/05/2011, 08:54
 
Fecha de Ingreso: junio-2008
Ubicación: Capital Federal xD
Mensajes: 1.208
Antigüedad: 11 años, 8 meses
Puntos: 35
Respuesta: Tutorial JQuery DataTables

La estructura inicial del table seria algo asi:
Código Javascript:
Ver original
  1. <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
  2.     <thead>
  3.         <tr>
  4.             <th width="20%">Rendering engine</th>
  5.             <th width="25%">Browser</th>
  6.             <th width="25%">Platform(s)</th>
  7.             <th width="15%">Engine version</th>
  8.             <th width="15%">CSS grade</th>
  9.         </tr>
  10.     </thead>
  11.     <tbody>
  12.         <tr>
  13.             <td colspan="5" class="dataTables_empty">Loading data from server</td>
  14.         </tr>
  15.     </tbody>
  16. </table>
__________________
I am Doyle please insert code.
  #24 (permalink)  
Antiguo 05/05/2011, 18:59
Avatar de gabrican  
Fecha de Ingreso: junio-2008
Ubicación: Medellin
Mensajes: 89
Antigüedad: 11 años, 8 meses
Puntos: 4
Respuesta: Tutorial JQuery DataTables

Cita:
Iniciado por doylelives Ver Mensaje
La estructura inicial del table seria algo asi:
Código Javascript:
Ver original
  1. <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
  2.     <thead>
  3.         <tr>
  4.             <th width="20%">Rendering engine</th>
  5.             <th width="25%">Browser</th>
  6.             <th width="25%">Platform(s)</th>
  7.             <th width="15%">Engine version</th>
  8.             <th width="15%">CSS grade</th>
  9.         </tr>
  10.     </thead>
  11.     <tbody>
  12.         <tr>
  13.             <td colspan="5" class="dataTables_empty">Loading data from server</td>
  14.         </tr>
  15.     </tbody>
  16. </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
__________________
Gabo Duk3
I.S
  #25 (permalink)  
Antiguo 06/05/2011, 08:52
 
Fecha de Ingreso: junio-2008
Ubicación: Capital Federal xD
Mensajes: 1.208
Antigüedad: 11 años, 8 meses
Puntos: 35
Respuesta: Tutorial JQuery DataTables

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
  1. {//Un simple ejemplo del objeto json que espera DD(dataTables)
  2.     "sEcho": 1,
  3.     "iTotalRecords": 100,
  4.     "iTotalDisplayRecords": 10,
  5.     "aaData": [
  6.             [
  7.                 "Nombre1",//Campo que corresponde a la 1º columna del datatable
  8.                 "Apellido1",//Campo que corresponde a la 2º columna del datatable
  9.                 "Direccion1"//Campo que corresponde a la 3º columna del datatable
  10.             ],
  11.             [
  12.                 "Nombre2",//Campo que corresponde a la 1º columna del datatable
  13.                 "Apellido2",//Campo que corresponde a la 2º columna del datatable
  14.                 "Direccion2"
  15.             ],
  16.             [
  17.                 "Nombre3",
  18.                 "Apellido3",
  19.                 "Direccion3"
  20.             ]
  21.         ]
  22.    }
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
__________________
I am Doyle please insert code.

Última edición por doylelives; 06/05/2011 a las 12:12
  #26 (permalink)  
Antiguo 20/07/2011, 00:03
 
Fecha de Ingreso: julio-2011
Mensajes: 6
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: Tutorial JQuery DataTables

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
  #27 (permalink)  
Antiguo 25/08/2011, 10:50
 
Fecha de Ingreso: agosto-2011
Ubicación: DF
Mensajes: 1
Antigüedad: 8 años, 6 meses
Puntos: 0
Pregunta Respuesta: Tutorial JQuery DataTables

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!!
  #28 (permalink)  
Antiguo 29/08/2011, 20:51
 
Fecha de Ingreso: junio-2008
Ubicación: Capital Federal xD
Mensajes: 1.208
Antigüedad: 11 años, 8 meses
Puntos: 35
Respuesta: Tutorial JQuery DataTables

10000 registros?! debes paginar los resultados y traerlos mediante ajax.
__________________
I am Doyle please insert code.
  #29 (permalink)  
Antiguo 05/03/2012, 08:55
 
Fecha de Ingreso: marzo-2012
Ubicación: Cali - Valle del Cauca
Mensajes: 3
Antigüedad: 7 años, 11 meses
Puntos: 0
Respuesta: Tutorial JQuery DataTables

Si alguien todavia necesita ayuda con este tema, me envian un mensaje y les dare una forma muy util de hacerlo
  #30 (permalink)  
Antiguo 14/03/2012, 12:45
 
Fecha de Ingreso: marzo-2012
Mensajes: 1
Antigüedad: 7 años, 11 meses
Puntos: 0
Respuesta: Tutorial JQuery DataTables

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

Etiquetas: javascript, tutoriales
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 3 personas




La zona horaria es GMT -6. Ahora son las 04:54.