Tema: [Problema] Como paginar datos en ajax y jquery?
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 26/09/2011, 14:44
douglasroos
 
Fecha de Ingreso: agosto-2009
Mensajes: 59
Antigüedad: 15 años, 4 meses
Puntos: 0
[Problema] Como paginar datos en ajax y jquery?
Que tal amigos, tengo un problema ya que apenas me estoy iniciando en esto del jquery, la cuestio es que tengo una pagina en la que uso 3 combobox para traer informacion de una BD usando ajax, este es el codigo JQuery:



Código Javascript: 
Ver original
  1. // Creamos el evento change para detectar el elemento elegido
  2. $("#marca").change(function () {
  3.     $("#marca option:selected").each(function () {
  4.                         // capturamos el valor elegido
  5.             marca=$(this).val();
  6.                         // Llamamos al archivo busca_modelo.php
  7.             $.post("busca_modelo.php", { marca: marca }, function(data){
  8.                         // Asignamos las nuevas opciones para los modelos
  9.             $("#modelo").html(data);
  10.         });         
  11.         });
  12.    })
  13. $("#modelo").change(function () {
  14.     $("#modelo option:selected").each(function () {
  15.                         // capturamos el valor elegido
  16.             modelo=$(this).val();
  17.                         // Llamamos al archivo busca_ano.php
  18.             $.post("busca_ano.php", { modelo: modelo }, function(data){
  19.                         // Asignamos las nuevas opciones para los años
  20.             $("#year").html(data);
  21.         });         
  22.         });
  23. })
  24. $("#year").change(function () {
  25.         $("#year option:selected").each(function () {
  26.             //alert($(this).val());
  27.                 year=$(this).val();
  28.                 var model = $("#modelo").val();
  29.                 var mark = $("#marca").val();
  30.                 $.post("genera_listado.php", { mark: mark , year: year , model: model }, function(data){
  31.                 $("#listado").html(data);
  32.             });         
  33.         });
  34.    })


es para una pagina de venta de carros usados, ahora todo eso lo traigo desde la BD con este codigo:


Código PHP: 
Ver original
  1. <?php
  2.  
  3. require("configs/aut_config.inc.php");
  4.  
  5. $marca = $_POST["mark"];
  6.  
  7. $modelo = $_POST["model"];
  8.  
  9. $ano = $_POST["year"];
  10.  
  11. $columnas = 4;
  12.         
  13.     echo '
  14.     <script type="text/javascript">
  15.     $(document).ready(function(){
  16.  
  17. $(\'a#vehi\').click(function(){ 
  18. $.fancybox.showActivity();
  19. $.fancybox({
  20. \'width\'         : 730,                
  21. \'height\'        : 500,                
  22. \'autoScale\'     : false,                
  23. \'transitionIn\'  : \'elastic\',               
  24. \'transitionOut\' : \'elastic\',                           
  25. \'href\'          : this.href,
  26. \'type\'          : \'iframe\',
  27. \'opacity\'     : false,
  28. \'overlayShow\' : false
  29. }); 
  30. return false;
  31. });
  32. });
  33.     </script>
  34.     ';
  35. $sql = "SELECT id_publicacion FROM vehiculos WHERE id_marca = '$marca' and id_modelo = '$modelo' and ano = '$ano'";
  36. $rr = mysql_query($sql,$con);
  37.  
  38. echo'<fieldset><legend><h2>Vehículos coincidentes con tu búsqueda</h2></legend><table border="0" cellspacing="10" cellpadding="0" align="center">';
  39.     echo "<tr>";
  40.     $nCol = 1; // contador de columnas
  41.  
  42. if (mysql_num_rows($rr) == 0){
  43.     
  44.     
  45.     echo "<td><img src='imagenes/busqueda.jpg' border='0'></td>";
  46.     
  47.     }else{
  48.  
  49. while ($arreglo = mysql_fetch_array($rr)){
  50.     
  51.     $id = $arreglo["id_publicacion"];
  52.     
  53.       if ($nCol <= $columnas)
  54.       {
  55.          echo "<td>";
  56.          $sSql = "SELECT id_carro,valor,marca,modelo,ano, id_imagen,ruta FROM vehiculos,imagenes WHERE vehiculos.id_publicacion = '$id' and imagenes.id_publicacion = '$id' and imagenes.principal = '1'";
  57.     $rrS = mysql_query($sSql,$con);
  58.         while ($arreglo2 = mysql_fetch_array($rrS)){
  59.         
  60.         $id_carro = $arreglo2["id_carro"];
  61.         $valor = $arreglo2["valor"];
  62.         $marca_veh = $arreglo2["marca"];
  63.         $modelo_veh = $arreglo2["modelo"];
  64.         $ano = $arreglo2["ano"];
  65.         $ruta = $arreglo2["ruta"];
  66.         echo "<table border=0 align='center'>"; //Se crea una tabla dentro de la celda para mostrar los productos ordenadamente
  67.         echo "<tr>";
  68.         echo "<td><a href='vehiculo.php?id=".$id."' id='vehi'><img src=".$ruta." border='0' width='141' height='106'></a></td>"; //Idealmente se debe mostrar la imagen del producto en esta celda
  69.         echo "</tr>"; 
  70.         echo "<tr>";
  71.         echo "<td align='center' class='precio'>Bs.F ".$valor."</td>";
  72.         echo "</tr>"; 
  73.         echo "<tr>";
  74.         echo "<td align='center' class='info'>".$marca_veh."&nbsp;".$modelo_veh."&nbsp;".$ano."</td>";
  75.         echo "</tr>"; 
  76.         echo "</table>";
  77.         echo "</td>";
  78.         }
  79.          $nCol = $nCol + 1;
  80.          if ($nCol > $columnas)
  81.          {
  82.             $nCol = 1;
  83.             echo "</tr>"; //se cierra la fila actual
  84.             echo "<tr>"; //se abre una nueva fila           
  85.          }  
  86.       }      
  87.     } while ($arreglo=mysql_fetch_array($rr));
  88.     if ($nCol <= $columnas) //Si la condición no se cumplió en el ciclo anterior me aseguro de cerrar la Fila que quedo abierta
  89.     {
  90.        echo "</tr>";
  91.     }   
  92.     echo "</table></fieldset>";
  93. }
  94. ?>


estos resultados los imprimo dentro de un div que ya tiene precargada desde el inicio la informacion de las publicaciones destacadas:


Código PHP: 
Ver original
  1. <div id="listado"><fieldset><legend><h2>Vehículos destacados</h2></legend>
  2. <?php
  3. $columnas = 4;
  4.         
  5.     echo '<table border="0" cellspacing="10" cellpadding="0" align="center">';
  6.     echo "<tr>";
  7.     $nCol = 1; // contador de columnas
  8. $sql = "SELECT id FROM publicaciones WHERE tipo_publicacion = '2' and activo = '1' ORDER BY RAND() LIMIT 0,4";
  9. $rr = mysql_query($sql,$con);
  10. while ($arreglo = mysql_fetch_array($rr)){
  11.     
  12.     $id = $arreglo["id"];
  13.     
  14.     
  15.         
  16.     
  17.       if ($nCol <= $columnas)
  18.       {
  19.          echo "<td>";
  20.          $sSql = "SELECT id_carro,valor,marca,modelo,ano, id_imagen,ruta FROM vehiculos,imagenes WHERE vehiculos.id_publicacion = '$id' and imagenes.id_publicacion = '$id' and imagenes.principal = '1'";
  21.     $rrS = mysql_query($sSql,$con);
  22.         while ($arreglo2 = mysql_fetch_array($rrS)){
  23.         
  24.         $id_carro = $arreglo2["id_carro"];
  25.         $valor = $arreglo2["valor"];
  26.         $marca_veh = $arreglo2["marca"];
  27.         $modelo_veh = $arreglo2["modelo"];
  28.         $ano = $arreglo2["ano"];
  29.         $ruta = $arreglo2["ruta"];
  30.          echo "<table border=0 align='center'>"; //Se crea una tabla dentro de la celda para mostrar los productos ordenadamente
  31.          echo "<tr>";
  32.          echo "<td><a href='vehiculo.php?id=".$id."' id='popup'><img src=".$ruta." border='0' width='141' height='106'></a></td>"; //Idealmente se debe mostrar la imagen del producto en esta celda
  33.          echo "</tr>"; 
  34.          echo "<tr>";
  35.          echo "<td align='center' class='precio'>Bs.F ".$valor."</td>";
  36.          echo "</tr>"; 
  37.          echo "<tr>";
  38.          echo "<td align='center' class='info'>".$marca_veh."&nbsp;".$modelo_veh."&nbsp;".$ano."</td>";
  39.          echo "</tr>"; 
  40.          echo "</table>";
  41.          echo "</td>";
  42.         }
  43.          $nCol = $nCol + 1;
  44.          if ($nCol > $columnas)
  45.          {
  46.             $nCol = 1;
  47.             echo "</tr>"; //se cierra la fila actual
  48.             echo "<tr>"; //se abre una nueva fila           
  49.          }  
  50.       }      
  51.     } while ($arreglo=mysql_fetch_array($rr));
  52.     if ($nCol <= $columnas) //Si la condición no se cumplió en el ciclo anterior me aseguro de cerrar la Fila que quedo abierta
  53.     {
  54.        echo "</tr>";
  55.     }   
  56.     echo "</table>";
  57.         
  58.  
  59.  
  60. ?>
  61. </fieldset></div>


esto me funciona perfectamente, el problema me surge cuando quier hacer paginacion de resultados ya que quiero usar ajax, descargue el plugin de jquery pagination pero no hallo como implementarlo para que me pagine los resultados obtenidos. Este es el codigo del paginador:


Código Javascript: 
Ver original
  1. function pageselectCallback(page_index, jq){
  2.                 var new_content = $('#listado div.result:eq('+page_index+')').clone();
  3.                 $('#listado').empty().append(new_content);
  4.                 return false;
  5.             }
  6.            
  7.             /** 
  8.              * Callback function for the AJAX content loader.
  9.              */
  10.             function initPagination() {
  11.                 var num_entries = $('#listado div.result').length;
  12.                 // Create pagination element
  13.                 $("#Paginacion").pagination(num_entries, {
  14.                     num_edge_entries: 2,
  15.                     num_display_entries: 8,
  16.                     callback: pageselectCallback,
  17.                     items_per_page:1
  18.                 });
  19.              }

aqui debo poner el id del div que quiero paginar, en este caso listado pero no se que mas poner a partir de ahi

Código Javascript: 
Ver original
  1. $('#listado').load('genera_listado.php', null, initPagination);


Agradezco toda la ayuda que me puedan brindar, la verdad no se como hacer la integracion.

Muchas gracias.

PD: Copio el mismo tema que habia creado pero no le pude cambiar el titulo y nadie entro en ese post. Espero por su ayuda, gracias nuevamente