[SOLUCIONADO] ¿Como hacer tablas dinamicas usando PHP, JQuery y Json o Ajax?

[adryan310]

Hola a todos los del foro... hoy vengo a consultarles a ustedes un pequeñin asunto. La cuestion es que necesito crear una tabla dinamica que me mostrará los datos que estan en una tabla en MySql, pero quiero hacerlo utilizando jquery con json o ajax para mas rapidez y eficacia. alguien podria ayudarme ? graxias...

[pateketrueke]

Antes que todo aprende a definir lo que significa AJAX, que no es más que Javascript, así que usar jQuery + JSON = AJAX ¿se entiende?

Ahora, ¿por qué no has buscado temas similares antes de abrir uno nuevo?

Primero se busca, aprende a usar el foro.

[iandrade]

Rapidez y Eficacia, no uses AJAX :)

Si quieres automatizar el proceso, puedes emplear algún Framework como ExJS que lee un origen de datos en JSON y necesita un Procedimiento que haga los updates. Puedes usarlo plano o con MVC. Pero no vas a poder evitar algunos detalles de conversión de datos o las limitantes que tiene el hecho de usar elementos prediseñados.

Saludos.

[ocp001a]

antes de hacer un proyecto tan complejo (o medianamente complejo) busca si entre las muchas librerías para tablas existe alguna que cubra tus necesidades, si no, busca alguna que se pueda adaptar y finalmente si ninguna se acerca a lo que quieres, te recomiendo empezar por aprender javascript y jquery para tener claro lo que puedes o no hacer.

[adryan310]

OK gracias por los comentarios y ahora puedo entender un poco mas sobre AJAX. Tengo un proyecto laboral donde tengo que utilizarlo por fuerza y pues ustedes comprenderán que donde manda capitán no gobierna marinero y no me queda de otra que hacerlo con esta herramienta. He buscado en la web y pues los ejemplos son algo tediosos... ¿Algún link que me recomienden ustedes por favor ?

[ocp001a]

Creo que primero necesitas plantearte los alcances de tu proyecto, lo que vas a hacer en php y lo que vas a hacer en js. Ya que tu planteamiento es muy general, hacer una tabla dinámica... ¿a qué te refieres con eso? si es sólo mostrar la información paginada, puedes hacer la mayor parte en php, usando ajax para hacer las llamadas que traigan cada página. Si vas a hacer ordenamientos, búsquedas etc, necesitas usar más javascript para controlar estos datos.

[adryan310]

OK! mira la cuestión es que tengo este código en php que me retorna al llamar un procedimiento almacenado todos los depósitos hechos por un usuario 'x'

Código PHP:

          require_once('CConexion.php'); 
     
    $strDepositante = $_GET['Depositante']; 
    $m_Depositos = array(); 
     
        // armamos la query 
        $resultado = $link_id->query("CALL details_depositos_depositante('".$strDepositante."')");      
   
        while ($filas=$resultado->fetch_assoc())  
    { 
       $m_Depositos[]= $filas; 
    } 
             
      print json_encode($m_Depositos);  
   

luego capturo ese array que envio al json de esta manera

Código:

$(document).ready(function(){
  $(':submit').live('click', function() { // This event fires when a button is clicked
      var button = $(this).val();
      $.ajax({ // ajax call starts
          url: 'conexion/CBuscarDepoCliente.php', // JQuery loads serverside.php
          data: 'Depositante=' + $(this).val(), // Send value of the clicked button
          dataType: 'json', // Choosing a JSON datatype
          success: function(data) // Variable data contains the data we get from serverside
          {
              //$('#wines').html(''); // Clear #wines div
              
              if (button == 'Buscar...') { // If clicked buttons value is all, we post every wine
                  for (var i in data.m_Depositos) {
					  $('#tableDeposits').append('<tr>');
					  $('#tableDeposits').append('<td>');
                      $('#tableDeposits').append(data.red[i]);
					  $('#tableDeposits').append('</td>');
					  $('#tableDeposits').append('</tr>');
                  }   
              }           
          }
      });
      return false; // keeps the page from not refreshing 
  });
});

Y esto lo tengo en la pagina donde debe de cargarme los depositos

Código HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
       <script src="js/tablaBuscaDepositos.js"></script>
   </head>
   <body>
        <form id="frm_Ins" name="frm_Ins" action="" method="post">
        <fieldset>
            <input id="txtDepo" name="txtDepo" type="text" placeholder="603940994" value="">
             
            <input id="cmdEnter" name="cmdEnter" type="submit" class="btn btn-primary" value="Buscar..." onClick="">

            <div id="wines">
              <!-- Tabla donde se muestran los depositos via ajax-->
              <table id="tableDeposits" class="table table-bordered">
                 <tr>
                  <td><strong># Deposito</strong></td>
                  <td><strong>Depositante</strong></td>
                  <td><strong>Usuario</strong></td>
                  <td><strong>Fecha</strong></td>
                  <td><strong>Monto</strong></td>
                  <td><strong>Tipo</strong></td>
                 </tr>
              </table>
              </div>
        </fieldset>
   </body>
</html> 

Ahora si alguna ayuda por favor ?

[adryan310]

Hola a todos los del foro... agradezco a quienes contestaron a mi pregunta e intentaron ayudarme. Les comento que logre hacer lo que deseaba aqui pongo el codigo por si alguien lo necesita...

Primero tengo una clase CBuscarDepoCliente.php llamada que me devuelve un array de datos que llamo desde Mysql:

Código PHP:

  require_once("CConnection.php");

class CBuscaDepositos extends CConnection
{

    private $m_Depositos; // array que almacenara lo devuelto por la db.
    private $m_depositante; // variable que le entra como parametro osea la cedula.

    public function __construct($strDepositante){
    $this->Connection();  
    $this->m_Depositos = array();
    $this->m_depositante = $strDepositante; 
    }

     public function GetDatosDepositos(){
          
    $str_temp_deposi = $this->m_depositante;
    $str_consulta = sprintf("CALL details_depositos_depositante('%s')",$str_temp_deposi); // llamo el procedimimiento almacenado y le mando el parametro necesario(Cedula) y esto me retorna el array de datos.
    $respuesta = $this->Consulta($str_consulta);
        
    while($registros = mysql_fetch_assoc($respuesta))
    {     
        $this->m_Depositos[] = array('id'=> $registros['DEP_ID'], 'depositante' => $registros['DEPO_NOMBRE'], 'usuario'=> $registros['USER_NAME']." ".$registros['USER_APELLIDOS'], 'fecha'=> $registros['FECHA'],
                                                            'monto'=> $registros['DEP_MONTO'], 'tipo'=> $registros['DEP_TIPO']);
    }

         print json_encode($this->m_Depositos);
      }
}

// al final instancio la clase.

 $strDepositante = $_GET['Depositante'];
    
 $depositos = new CBuscaDepositos($strDepositante);

 $depositos->GetDatosDepositos();  
   

NOTA: la conexion que le entra a la clase la hacen ustedes.

Este es el js que manda el parametro, recibe el array y construye la tabla dinamica:

Código:

$(document).ready(function(){
  $('#cmdEnter').on("click", null, function() {  
      $.ajax({ // ajax call starts
          url: 'Invocations/InvocationCBuscarDepoCliente.php', // JQuery loads serverside.php
          data: 'Depositante=' + $('#txtDepo').val(), // Send value of text
          dataType: 'json', // Choosing a JSON datatype
          success: function(data) // Variable data contains the data we get from serverside
          {
			  var html='';
			  // si la consulta ajax devuelve datos
			  if(data.length > 0){
                  $.each(data, function(i,item){
					  html += '<tr>'
                            html += '<td>'+item.id+'</td>'
                            html += '<td>'+item.depositante+'</td>'
                            html += '<td>'+item.usuario+'</td>'
                            html += '<td>'+item.fecha+'</td>'
							html += '<td>'+item.monto+'</td>'
							html += '<td>'+item.tipo+'</td>'
                        html += '</tr>';
				    });
              } 
			  // si no hay datos mostramos mensaje de no encontraron registros
                if(html == '') html = '<tr><td colspan="6">No se encontraron registros..</td></tr>'
                // añadimos  a nuestra tabla todos los datos encontrados mediante la funcion html
                $("#tableDeposits tbody").html(html);  
         }           
      });
      return false; // keeps the page from not refreshing 
  });
})

Por ultimo creamos la pagina que mostrara el recultado:

Código HTML:

<h2>Buscar Depositos</h2>
      <form id="frm_Ins" name="frm_Ins" action="" method="post">
           <table class="table table-bordered">
               <tr>
                 <td>Depositante:</td>
                 <td><input id="txtDepo" name="txtDepo" type="text" placeholder="111111111" value=""></td>
               </tr>
               <tr>
                 <td></td>
                 <td>
                  <input id="cmdEnter" name="cmdEnter" type="submit"  value="Buscar...">
                   </td>
               </tr>
              </table>
              <table id="tableDeposits" class="table table-bordered">
                <thead>
                 <tr>
                  <td><strong># Deposito</strong></td>
                  <td><strong>Depositante</strong></td>
                  <td><strong>Usuario</strong></td>
                  <td><strong>Fecha</strong></td>
                  <td><strong>Monto</strong></td>
                  <td><strong>Tipo</strong></td>
                 </tr>
                </thead>
                <tbody>
 
                </tbody>
              </table>
      </form> 

Me despido y espero que este codigo le llegue a servir a alguien como a mi me sirvio