Foros del Web » Programando para Internet » Javascript » Frameworks JS »

[Aporte] Usar Data Table y no morir en el intento

Estas en el tema de [Aporte] Usar Data Table y no morir en el intento en el foro de Frameworks JS en Foros del Web. Veo que hay mucha gente que ha tenido problemas con este increible plugin de JQuery además de su mal uso, dejaré una guia de como ...
  #1 (permalink)  
Antiguo 14/01/2013, 09:29
 
Fecha de Ingreso: noviembre-2012
Ubicación: Caracas - Venezuela
Mensajes: 116
Antigüedad: 7 años, 10 meses
Puntos: 1
Información [Aporte] Usar Data Table y no morir en el intento

Veo que hay mucha gente que ha tenido problemas con este increible plugin de JQuery además de su mal uso, dejaré una guia de como utilizar un data table a partir de una base de datos junto con algunos API y extras:

Data table es un Plugin de JQuery que puede ser utilizado en cualquier lenguaje de programación del lado del servidor (PHP,JPS,ASP, etc), además con cualquier base de datos (MySQL, SQLServer, PostgreSQL, Oracle, etc). Simplemente cambia la manera en que llamas al objeto o la sintaxis del lenguaje de programación. Es totalmente editable a nivel de CSS y también trabaja con JQueryUI con el cual puedes diseñar a tu gusto en su respectiva pagina y simplemente utilizarlo.
Este data table trabaja con arreglos Json asi que aqui mostraré como devolver dicho arreglo.

Con POO vamos a necesitar 3 archivos y una base de datos: en este caso usaremos PHP y MySQL:

1) Pagina .html o también PHP: aquí solo ponemos la tabla en html con sus respectivos TH (cantidad de columnas que tendrá la tabla) y también el llamado al datatable por medio de JQuery y sus respectivas librerías de CSS y Js.

Código HTML:
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../DataTables-1.9.2/media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.9.2.custom.min"></script>
<script type="text/javascript" src="../DataTables-1.9.2/media/js/TableTools.min.js"></script>
<link type="text/css" rel="stylesheet" href="../DataTables-1.9.2/TableTools-2.1.2/media/css/TableTools.css"/>
<link type="text/css" rel="stylesheet" href="../DataTables-1.9.2/media/css/jquery.dataTables_themeroller.css"/>
<link type="text/css" href="../css/redmond/jquery-ui-1.8.20.custom.css" rel="Stylesheet"/>


<script type="text/javascript">

$(document).ready(function() {
	
  $('#tabla').dataTable( {
	    "bProcessing": true, 
		"aaSorting": [],     
			"bJQueryUI": true, 
		"sDom": '<"H"Tfr>t<"F"ip>',   /* Acomoda los elementos en el header y footer de la tabla       */
        "oTableTools": { /*  Para importar a PDF xsl imprimir, etc */
			"sSwfPath" : "../DataTables-1.9.2/TableTools-2.1.2/media/swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                "copy",
                "print",
                "xls",
				"pdf",
           ]
        },
        "sAjaxSource": 'ejemplo.php',   /*  archivo que alimentará el data table desde la BD      */
		"oLanguage": {"sUrl": "../DataTables-1.9.2/es.txt"}, /*lenguajes personalizado*/
		"sPaginationType": "full_numbers",
		"bAutoWidth": false
	
    } );
	
		
} );
</script>
-----------------------------------------------------------------------------
<body>

<table id="tabla" width="100%">
         <thead>
            <tr>
              <th  >Cédula</th>
              <th  >Nombre</th>
              <th >Sexo</th>
         </thead>
         <tbody>
         </tbody>
      </table>

</body> 


2) Archivo PHP del ajaxsource: este archivo es el que alimenta a la tabla con el query de la BD yo lo haré con POO, el que no use esto puede conectar a la BD de la forma que quiera.: ejemplo.php

Código PHP:
<?php

/* se incluye la clase */
require ("../classes/DAOEjemplo.php");
/* se crea el objeto  */
try {
    
$ejemplo = new DAOEjemplo();

    
$listado $ejemplo->listarUsuariosJson();
    echo 
$listado;
        
    }

 catch (
Exception $e) {
    
header ("Location: errorSistema.php");    
}


?>
3 archivo dao o fuente del POO: aqui simplemente esta el query y retorna los arreglos solicitados:


Código PHP:
<?php
    
function listarUsuariosJson () {
        
$sql "SELECT cedula,nombre,sexo from usuarios";
    
        
$res $this->conexion->ejecutar($sql);     //objeto de conexion SQL
        
        
if( mysql_num_rows($res) >0
        {
            while (
$row mysql_fetch_array($res)) {
             
$output['aaData'][] = $row
             }
               return 
json_encode($output);
        }
        else {
            
$output['aaData']['id_pac'] = null;
            return 
json_encode($output);
            }
        }


?>
y listo con eso su data table deberia funcionar ahora dejaré algunas explicaciones


"bJQueryUI": true, /* Utiliza JQueryUI como tema */
"bServerSide": true, /* Para manejar data tables con mas de 1.000 registros */
"oTableTools" /* Marco de opciones para importar el data table */
"oLanguage": para cambiarle el idioma al data table




Este plugin contiene muchisimas mas opciones para explotar, todavía estoy en proceso de descubrir su mayoria, a medida que vaya encontrando mas funcionalidades la iré agregando al temar


agradecer no cuesta nada :)

Última edición por angelsds; 14/01/2013 a las 09:39
  #2 (permalink)  
Antiguo 15/01/2013, 14:22
 
Fecha de Ingreso: enero-2012
Ubicación: España
Mensajes: 150
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: [Aporte] Usar Data Table y no morir en el intento

Y tiene la opción de configurar un editor con una interfaze básica para hacer inserciones, modificaciones y eliminaciones.

Pero el editor no tiene la opción de configurar lo para editar un número múltiple de columnas a la vez.

http://www.forosdelweb.com/f127/busc...-html-1031941/
  #3 (permalink)  
Antiguo 16/01/2013, 07:08
 
Fecha de Ingreso: noviembre-2012
Ubicación: Caracas - Venezuela
Mensajes: 116
Antigüedad: 7 años, 10 meses
Puntos: 1
Respuesta: [Aporte] Usar Data Table y no morir en el intento

postea aquí el codigo de cómo usarlo, lo pruebo y lo agrego al post con su respectivo agradecimiento

Etiquetas: javascript, javascript+html, jquery-ajax, jquery-ui, mysql, php
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




La zona horaria es GMT -6. Ahora son las 06:18.