Ver Mensaje Individual
  #3 (permalink)  
Antiguo 26/10/2013, 15:39
Avatar de satjaen
satjaen
 
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 11 años, 8 meses
Puntos: 10
Respuesta: DataTable de JQuery dinámicamente con consulta a mysql

Ya he podido gracias a este tutorial que aporto para el que guste:

Código:
http://www.youtube.com/watch?v=FX5YxkGmkmk

Quiera que por favor alguien me dijera como puedo sacar la tabla en pdf.

Este es mi código:

Código Javascript:
Ver original
  1. <?php
  2. /*PLANTILLA DATTATBLE DITABLE CON PARAMETROS DONDE SOLO SE TIENE QUE EDITAR EL QUERY Y LA CONEXION ("include('connections/")
  3.  * ESTA PLANTILLA CUNETA CON PARAMETROS COMO DATEPICKER DE JQUERY, BOTONES GUARDAR Y <SELECT><OPTION>
  4.  * ESTA PLANTILLA ESTA UBICADA EB C:\xampp\htdocs\Plantillas\DataTableEditable.php *
  5.  * ESTE ARCHIVO NO FUNCIONA SOLO, REQUIERE DE SUS COMPONENETE PREVIOS QUE SON LOS SIGUIENTES *
  6.  *
  7.  * css/demo_table.css   LE DAFORMA A LA TABLA
  8.  * css/jquery-ui.css    TRABAJA EN CONJUNTO CON JQUERY UI PARA DARLE CIERTO COLOR A LOS COMPONENETE RESULTANTES DE JEQUERY UI
  9.  *
  10.  * js/jquery.js         LIBRERIA ORIGINAL DE JQUERY
  11.  * js/jquery.dataTables.min.js  LE DA FORMATO Y FUNCIONES A LA TABLA
  12.  * js/jquery-ui-1.8.18.custom.min.js    PROVEE CALENDARIOS,SCROLLBAR Y OTROS COMPONENETES
  13.  * js/jquery.validate.js        VALIDA VALORES INGRESADOS
  14.  * js/jquery.jeditable.js       HACE QUE SE PUEDA EDITAR DESDE JS
  15.  * js/jquery.dataTables.editable.js     HACE QUE SE PUEDA EDITAR DESDE JS EN AYUDA CON jquery.jeditable.js
  16.  */
  17. include('connections/localhost.php');
  18. header('Content-type: text/html; charset=iso-8859-1');
  19. ?>
  20. <!DOCTYPE html>
  21. <html>
  22.     <head>
  23.         <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  24.         <link href="css/demo_table.css" rel="stylesheet"  type="text/css"/>
  25.         <link href="css/jquery-ui.css" rel="stylesheet"  type="text/css"/>
  26.  
  27.         <script src="js/jquery.js"></script>
  28.         <script src="js/jquery.dataTables.min.js" type="text/javascript"></script>
  29.         <script src="js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
  30.         <script src="js/jquery.validate.js" type="text/javascript"></script>
  31.         <script src="js/jquery.jeditable.js" type="text/javascript"></script>
  32.         <script src="js/jquery.dataTables.editable.js" type="text/javascript"></script>
  33.         <script src="js/jquery.jeditable.datepicker.js" type="text/javascript"></script>
  34.         <script>
  35.            $(document).ready(function(){
  36.                 //DAMOS FORMATO A LA TABLA example Y LA CONVERTIMOS EN PARAMETRO EN oTable
  37.                 var oTable = $('#example').dataTable({
  38.                     bJQueryUI: true
  39.                 }).makeEditable({
  40.                     /*
  41.                      *LA CONEXION A LA BD SE ENCUENTRA EN  connections/localhost.php
  42.                      *ajax/Mysql.php  UBICACION DL ARCHVO QUE RESIBIRA LOS PARAMETROS A EDITAR EN LA BD
  43.                      *STATEMENT=UPDATE (o DELETE o INSERT)  ES EL TIPO DE QUERY PUEDE SER UPDTE,INSERT, O DELETE (SELECT NOOOO)
  44.                      *TABLE     ES EL NOMBRE DE LA TABLA
  45.                      *IDNAME    ES EL ID QUE SE VA A ACTUALIZAR O BORRAR (INSERT OVBIO NO LLEVA IDNAME)
  46.                     */
  47.                     sUpdateURL: "ajax/Mysql.php?STATEMENT=UPDATE&TABLE=almacen000&IDNAME=recambio",
  48.                     sDeleteURL: "ajax/Mysql.php?STATEMENT=DELETE&TABLE=almacen000&IDNAME=recambio",
  49.                     sAddURL: "ajax/Mysql.php?STATEMENT=INSERT&TABLE=almacen000",
  50.                     sDeleteHttpMethod: "GET",
  51.                     sAddHttpMethod: "GET"
  52.                    
  53.                     ,"aoColumns": [
  54.                         {
  55.                             type: 'text',
  56.                             submit: 'Guardar'
  57.                         },
  58.                         {
  59.                             type: 'text'
  60.                        
  61.                         },
  62.                         /*PARA QUE FUNCIONE ESTE PARAMETRO SE REQUIERE EL PHP listData/EngineVersionList.php*/
  63.                         {
  64.                             //indicator: 'Saving Engine Version...',
  65.                             tooltip: 'Click to select engine version',
  66.                             loadtext: 'loading...',
  67.                             type: 'select',
  68.                             onblur: 'cancel',
  69.                             submit: 'Ok',
  70.                             loadurl: 'listData/EngineVersionList.php',
  71.                             loadtype: 'GET',
  72.                             cssclass:"aaa"
  73.                         }
  74.                     ]                  
  75.                 });
  76.                 $("#interpret").datepicker();
  77.                 //LLAMAMSO A LOS INPUTS QUE ESTAN EN EL PIE DE LA TABLA
  78.                 $("tfoot input").keyup( function () {
  79.                     oTable.fnFilter( this.value, $("tfoot input").index(this) );
  80.                 } );
  81.                
  82.             });            
  83.         </script>
  84.         <title></title>
  85.     </head>
  86.     <body>
  87.         <!-- BOTONES AGREGAR Y BORRAR  -->
  88.         <button id="btnAddNewRow" class="add_row ui-button-text">Añadir</button>
  89.         <button id="btnDeleteRow" class="add_row ui-button-text">Borrar</button>
  90.         <?php
  91.         //LLENAMOS LA BASE DE DATOS
  92.         mysql_select_db($database_localhost, $localhost);
  93.         $sqlSelect ="
  94.        SELECT
  95.       recambio,denominacion,pvp,coste,existencias,existencias004,ubicacion,proveedor
  96.        ";
  97.         $sqlFrom = "
  98.        FROM almacen000
  99.        ";
  100.        $sqlGroup = "  ";
  101.         //UNIMOS LAS PARETES DE LAS QUERYS
  102.         $sqlQuery = $sqlSelect . $sqlFrom . $sqlWhere . $sqlGroup;
  103.         $table = mysql_query($sqlQuery, $localhost) or die(mysql_error());
  104.         if ($table) {
  105.             ?>
  106.         <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
  107.             <thead>
  108.             <tr>
  109.                 <?php
  110.                 for($i = 0; $i < mysql_num_fields($table); $i++) {
  111.                     $field_info = mysql_fetch_field($table, $i);
  112.                     if($field_info->name!="id"){
  113.                     ?>
  114.                         <th><?php echo $field_info->name; ?></th>
  115.                     <?php
  116.                     }
  117.                 }
  118.                 ?>
  119.             </tr>
  120.             </thead>
  121.             <tbody>
  122.                 <?php
  123.                 //SACAMOS LOS REGISTROS DE LA TABLA
  124.                 while ($row = mysql_fetch_assoc($table)) {
  125.                     ?>
  126.                 <tr id="<?php echo $row["recambio"]; ?>">
  127.                     <?php
  128.                     for($i = 0; $i < mysql_num_fields($table); $i++) {
  129.                         $field_info = mysql_fetch_field($table, $i);
  130.                         if($field_info->name!="id"){
  131.                         ?>
  132.                             <td><?php    echo $row[$field_info->name]; ?></td>
  133.                         <?php
  134.                         }
  135.                     }
  136.                     ?>
  137.                 </tr>
  138.                     <?php
  139.                 }
  140.                 ?>                
  141.             </tbody>
  142.             <tfoot>
  143.         <tr>
  144.                     <th><input type="text"></th>
  145.                     <th><input type="text"></th>
  146.                     <th><input type="text"></th>
  147.                     <th><input type="text"></th>
  148.                     <th><input type="text"></th>
  149.                     <th><input type="text"></th>
  150.                     <th><input type="text"></th>
  151.                     <th><input type="text"></th>
  152.                 </tr>
  153.             </tfoot>                        
  154.         </table>
  155. <!--        CADA TEXT Y LABEL DEBE DE ESTAR VINCULADO CON CADA COLUMNA DE LA BASE DE DATOS
  156.         LOS rel="0" DEBEN DE TENER UN ORDEN CONSECUTIVO-->
  157.         <form id="formAddNewRow" action="#" title="Agregar registro">
  158.                 <?php
  159.                 $contColum=0;
  160.                 for($i = 0; $i < mysql_num_fields($table); $i++) {
  161.                     $field_info = mysql_fetch_field($table, $i);
  162.                     if($field_info->name!="id"){
  163.                         ?>
  164.                         <label for="<?php echo $field_info->name; ?>"><?php echo $field_info->name; ?></label><br />
  165.                         <input type="text" name="COLUMN_<?php echo $field_info->name; ?>"
  166.                             id="<?php echo $field_info->name; ?>" class="required" rel="<?php echo $contColum; ?>" />
  167.                         <br />            
  168.                         <?php
  169.                         $contColum++;
  170.                     }
  171.                 }
  172.                 ?>
  173.         </form>
  174.             <?php
  175.         }
  176.         ?>
  177.     </body>
  178. </html>


Gracias