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

[SOLUCIONADO] paginacion con filtro de select

 Estas en el tema de paginacion con filtro de select en el foro de Frameworks JS en Foros del Web. tengo una paginacion al cargar la pagina Código: $(document).ready(function(){ load(1); }); function load(page){ $.ajax({ url:'data/allit.php?action=ajax&page='+page, beforeSend: function () { $("#allitemsus").html("<img src='img/loading.gif' width='160' height='24'>"); }, success: ...
  #1 (permalink)  
Antiguo 13/02/2014, 23:17
 
Fecha de Ingreso: marzo-2010
Mensajes: 50
Antigüedad: 14 años, 1 mes
Puntos: 0
paginacion con filtro de select
tengo una paginacion al cargar la pagina
Código: 
$(document).ready(function(){
		load(1);	
});
function load(page){
		$.ajax({
			url:'data/allit.php?action=ajax&page='+page,
			beforeSend: function () {
			$("#allitemsus").html("<img src='img/loading.gif' width='160' height='24'>");
				},
			success: function (response) {
			$("#allitemsus").html(response);
			}
		})
}
Funciona bien pero aqui biene el problema como ago para que me filte por medio de unos select de esta forma

Código: 
<select  name="s1" >
      <option value="todos">Todas</option>
      <option value="pais">pais</option>
      <option value="estado">estado</option>
      <option value="Raro">colonia</option>
</select>
El filtro tendria que ser me muestre por pais,estado o colonia segun el selecionado y tener la paginascion de estos filtros

algien me podria ayudar
  #2 (permalink)  
Antiguo 14/02/2014, 12:21
 
Fecha de Ingreso: julio-2013
Mensajes: 158
Antigüedad: 10 años, 9 meses
Puntos: 6
Respuesta: paginacion con filtro de select
Una duda los ¿quieres que se filtren al precionar un boton o directamente cuando se seleccione una opcion?
  #3 (permalink)  
Antiguo 15/02/2014, 15:07
 
Fecha de Ingreso: marzo-2010
Mensajes: 50
Antigüedad: 14 años, 1 mes
Puntos: 0
Respuesta: paginacion con filtro de select
Cita:
Iniciado por cesa_r Ver Mensaje
Una duda los ¿quieres que se filtren al precionar un boton o directamente cuando se seleccione una opcion?
la idea es que al seleccionar la opcion por medio de ajax aga la consulta con ese filtro de seleccion y aga la paginacion
  #4 (permalink)  
Antiguo 16/02/2014, 02:11
 
Fecha de Ingreso: julio-2013
Mensajes: 158
Antigüedad: 10 años, 9 meses
Puntos: 6
Respuesta: paginacion con filtro de select
Código Javascript: 
Ver original
  1. $(document).ready(function() {
  2.  $ = jQuery.noConflict();   
  3.      var select_1 = document.getElementById("select_1");
  4.      $(select_1).change(function() { //Cuando un usuario selecciona alguna opcion de select
  5.          valor = $(this).attr("value"); //Recoje el value de la opcion seleccionada del select
  6.          
  7.          var dataString = 'parametro='+valor; //almacenamos los parametros a enviar
  8.          
  9.          $.ajax({
  10.              type: "GET", //El tipo (GET o POST)
  11.              url:'data/archivo.php', //el archivo al cual pasaras los parametros
  12.              data: dataString, //los parametros
  13.              beforeSend: function () {
  14.              //lo que quieras
  15.              },
  16.              success: function (response) {
  17.              //lo que quieras
  18.              }
  19.          })
  20.          
  21.          alert(valor);
  22.         
  23.      });
  24. });

Código HTML: 
Ver original
  1. <select  name="s1" id="select_1" >
  2.       <option value="todos">Todas</option>
  3.       <option value="pais">pais</option>
  4.       <option value="estado">estado</option>
  5.       <option value="Raro">colonia</option>
  6. </select>

La paginacion la realizas en el php.
  #5 (permalink)  
Antiguo 17/02/2014, 01:54
 
Fecha de Ingreso: marzo-2010
Mensajes: 50
Antigüedad: 14 años, 1 mes
Puntos: 0
Respuesta: paginacion con filtro de select
Cita:
Iniciado por cesa_r Ver Mensaje
Código Javascript: 
Ver original
  1. $(document).ready(function() {
  2.  $ = jQuery.noConflict();   
  3.      var select_1 = document.getElementById("select_1");
  4.      $(select_1).change(function() { //Cuando un usuario selecciona alguna opcion de select
  5.          valor = $(this).attr("value"); //Recoje el value de la opcion seleccionada del select
  6.          
  7.          var dataString = 'parametro='+valor; //almacenamos los parametros a enviar
  8.          
  9.          $.ajax({
  10.              type: "GET", //El tipo (GET o POST)
  11.              url:'data/archivo.php', //el archivo al cual pasaras los parametros
  12.              data: dataString, //los parametros
  13.              beforeSend: function () {
  14.              //lo que quieras
  15.              },
  16.              success: function (response) {
  17.              //lo que quieras
  18.              }
  19.          })
  20.          
  21.          alert(valor);
  22.         
  23.      });
  24. });

Código HTML: 
Ver original
  1. <select  name="s1" id="select_1" >
  2.       <option value="todos">Todas</option>
  3.       <option value="pais">pais</option>
  4.       <option value="estado">estado</option>
  5.       <option value="Raro">colonia</option>
  6. </select>

La paginacion la realizas en el php.

el problema es la paginacion con el filtro del <select <option no se como
  #6 (permalink)  
Antiguo 17/02/2014, 16:14
 
Fecha de Ingreso: julio-2013
Mensajes: 158
Antigüedad: 10 años, 9 meses
Puntos: 6
Respuesta: paginacion con filtro de select
Amigo creo que tienes que ser mas claro con lo que buscas, proporcionar mas informacion ¿lo que buscas es convertir un select en un paginador? o que cuando se seleccione una opcion del select y traiga los resultados ¿estos resultados se paginen?
  #7 (permalink)  
Antiguo 17/02/2014, 22:48
 
Fecha de Ingreso: marzo-2010
Mensajes: 50
Antigüedad: 14 años, 1 mes
Puntos: 0
Respuesta: paginacion con filtro de select
Cita:
Iniciado por cesa_r Ver Mensaje
Amigo creo que tienes que ser mas claro con lo que buscas, proporcionar mas informacion ¿lo que buscas es convertir un select en un paginador? o que cuando se seleccione una opcion del select y traiga los resultados ¿estos resultados se paginen?
Lo que busco es que al selecionar una opcion me regrese los reultados paginados

por ejemplo

Código: 
<select  name="s1" id="select_1" >
          <option value="todos">Todas</option>
          <option value="cafe">cafe</option>
          <option value="azucar">azucar</option>
          <option value="arroz">arroz</option>
</select>
Si seleciono la opcion de cafe me va a traer todos los resultados por medio de ajax que contengan cafe si seleciono azucar me regresa todos los resultados que contengan azucar

Actualmente lo tengo asi (sin paginar)

La javascript
Código: 
function recargarS3(val){   
$('#contenedor').html("<img src='img/loading.gif' width='160' height='24'>"); 
$.ajax({ 
url: 'data/proseso.php',
 data: 'heroe='+val,
  success: function(resp){ 
  $('#contenedor').html(resp);
} }); }
El codigo
Código: 
<select onChange="recargarS2(this.value)" name="s1" id="productos">
<option value="todos">Todas</option>
<option value="cafe">cafe</option>
<option value="azucar">azucar</option>
<option value="arroz">arroz</option>
</select>

<section id="contenedor">

</section>
Al selecionar una opcion me regresa los resultados y los pone en id="contenedor" funciona bien pero no estan paginado lo que deseo es que se paginen por medio de ajax.

el archivo proseso.php hace una consulta sql con la condiocion de la opcion

Código HTML:
$query = mysql_query("SELECT * FROM infoplatos  WHERE iglediente = '".$opcion."' ORDER BY id");
Espero averme expresado bien de lo que deseo y gracias por tus respuestas y el apoyarme
  #8 (permalink)  
Antiguo 18/02/2014, 01:48
 
Fecha de Ingreso: julio-2013
Mensajes: 158
Antigüedad: 10 años, 9 meses
Puntos: 6
Respuesta: paginacion con filtro de select
Código Javascript: 
Ver original
  1. // JavaScript Document
  2. $(document).ready(function() {
  3.      $ = jQuery.noConflict();   
  4.      
  5.      function recargarS3(val){
  6.          $('#contenedor').html("<img src='img/loading.gif' width='160' height='24'>"); 
  7.          $.ajax({
  8.              url: 'data/proseso.php',
  9.              data: 'heroe='+val,
  10.              success: function(resp){
  11.                  $('#contenedor').html(resp);
  12.              }
  13.          }); 
  14.      }
  15.      
  16.      $(document).on('click', '#pagination-clean li', function(e) {
  17.           e.preventDefault();
  18.           
  19.           var depage = $(this).attr("data"),
  20.               val = $(this).parent().attr("val"); //Vuelves a tomar el valor sobre el cual estas paginando.
  21.           var dataString = 'page='+depage+'&heroe='+val;
  22.          
  23.  
  24.           $.ajax({
  25.               type: "GET",
  26.               url: 'data/proseso.php',
  27.               data: dataString,
  28.               success: function(data) {
  29.                   $('#contenedor').html(data);
  30.                  
  31.               }
  32.           });
  33.           
  34.       });
  35. });

Código PHP: 
Ver original
  1. if (isset($_GET['page'])) {
  2.      $page = $_GET['page'];
  3.  } else {
  4.      $page = 1;
  5.  }
  6.  
  7.  $opcion = $_GET['heroe']; 
  8.  
  9.  $cur_page = $page;
  10.  $page -= 1;
  11.  $per_page = 12; //NUMERO DE REGISTROS POR PAGINA
  12.  $previous_btn = true; //HABILITAR O DESABILITAR PAGINA ANTERIOR (true o false)
  13.  $next_btn = true; //HABILITAR O DESABILITAR PAGINA SIGUIENTE (true o false)
  14.  $first_btn = false; //HABILITAR O DESABILITAR PRIMERA PAGINA (true o false)
  15.  $last_btn = false; //HABILITAR O DESABILITAR ULTIMA PAGINA (true o false)
  16.  $start = $page * $per_page;
  17.  
  18.  
  19.  $query_myconsulta = "SELECT COUNT(*) AS conteo FROM tblmytabla WHERE iglediente='".$opcion."'";
  20.  $consulta_myconsulta = mysql_query($query_myconsulta, $myconexion) or die(mysql_error());
  21.  $row = mysql_fetch_array($consulta_myconsulta, MYSQL_ASSOC);
  22.  
  23.  $count = $row['conteo'];
  24.  $no_of_paginations = ceil($count/$per_page);
  25.  
  26.   //ACA SE SELECCIONAN TODOS LOS DATOS DE LA TABLA
  27.  
  28.  $query_myconsulta2 = "SELECT * FROM tblmytabla WHERE iglediente='".$opcion."' LIMIT $start, $per_page";
  29.  $consulta_myconsulta2  = mysql_query($query_myconsulta2, $myconexion) or die(mysql_error());
  30.  $row_myconsulta2  = mysql_fetch_assoc($consulta_myconsulta2); 
  31.  
  32.         
  33.  if ($count > 0) { // SI HAY MAS DE UN REGISTRO 
  34.      while ($row_myconsulta2 = mysql_fetch_assoc($consulta_myconsulta2)); { //TUS REGISTROS 
  35.     }  
  36.  } 
  37.  
  38.  
  39. /* ---------------Calculo de los valores inicio y final----------------------------------- */
  40. if ($cur_page >= 7) {
  41.     $start_loop = $cur_page - 3;
  42.     if ($no_of_paginations > $cur_page + 3)
  43.         $end_loop = $cur_page + 3;
  44.     else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 6) {
  45.         $start_loop = $no_of_paginations - 6;
  46.         $end_loop = $no_of_paginations;
  47.     } else {
  48.         $end_loop = $no_of_paginations;
  49.     }
  50. } else {
  51.     $start_loop = 1;
  52.     if ($no_of_paginations > 7)
  53.         $end_loop = 7;
  54.     else
  55.         $end_loop = $no_of_paginations;
  56. }
  57. /* ----------------------------------------------------------------------------------------------------------- */
  58. $msg = "";
  59. $msg .= "<ul id='pagination-clean' val='$opcion'>";
  60. $msg .= "<li class='description'>Películas $cur_page de $no_of_paginations</li>";
  61.  
  62. if ($first_btn && $cur_page > 1) {
  63.     $msg .= "<li data='1' class='previous'>Primera</li>";
  64. } else if ($first_btn) {
  65.  
  66.     $msg .= "<li data='1' class='previous-off'>Primera</li>";
  67. }
  68.  
  69. if ($previous_btn && $cur_page > 1) {
  70.     $pre = $cur_page - 1;
  71.     $msg .= "<li data='$pre' class='previous'><a href='#'>&laquo; Anterior</a></li>";
  72. } else if ($previous_btn) {
  73.     $msg .= "<li class='previous-off'>&laquo; Anterior</li>";
  74. }
  75. for ($i = $start_loop; $i <= $end_loop; $i++) {
  76.  
  77.     if ($cur_page == $i)
  78.         $msg .= "<li data='$i' class='active'>{$i}</li>";
  79.     else
  80.         $msg .= "<li data='$i'><a href='#'>{$i}</a></li>";
  81. }
  82.  
  83. // BOTON SIGUIENTE
  84. if ($next_btn && $cur_page < $no_of_paginations) {
  85.     $nex = $cur_page + 1;
  86.     $msg .= "<li data='$nex' class='next'><a href='#'>Siguiente &raquo;</a></li>";
  87. } else if ($next_btn) {
  88.     $msg .= "<li class='next-off'>Siguiente &raquo;</li>";
  89. }
  90.  
  91. // BOTON ANTERIOR
  92. if ($last_btn && $cur_page < $no_of_paginations) {
  93.     $msg .= "<li data='$no_of_paginations' class='next'>Ultima</li>";
  94. } else if ($last_btn) {
  95.     $msg .= "<li data='$no_of_paginations' class='next-off'>Ultima</li>";
  96. }
  97. $msg = $msg . "</ul>"; 
  98. echo $msg;

Código CSS: 
Ver original
  1. /* -------------------------------------------- */
  2. /* ------------- Pagination: Clean ------------ */
  3. /* -------------------------------------------- */
  4. #pagination-clean { margin: 0; text-align: right; padding: 15px; font-family: "Times New Roman", Times, serif; }
  5. #pagination-clean li { border-right:solid 1px #DEDEDE; margin:0; padding:3px 6px; font-size:12px; list-style:none; /* savers */ display: inline-block; }
  6. /* savers #pagination-clean li,*/
  7. #pagination-clean li:last-child { border-right: 0; }
  8. #pagination-clean li.description {  border-right:solid 1px #DEDEDE; margin-right:2px; font-size: 12px; color: #666; border-right:solid 1px #DEDEDE;  }
  9. #pagination-clean a           { margin-right:2px; }
  10. #pagination-clean .previous-off,
  11. #pagination-clean .next-off   { color:#888888;  font-weight:bold; padding:3px 4px; border: none; }
  12. #pagination-clean .next ,
  13. #pagination-clean previous a  { border:none; font-weight:bold; }
  14. #pagination-clean .active     { color:#000000;    /* savers */ border-right:solid 1px #DEDEDE; }
  15. #pagination-clean a:link,
  16. #pagination-clean a:visited   { color:#0e509e; text-decoration:none; }
  17. #pagination-clean a:hover     { text-decoration:underline; }

Pruebalo y luego me dices.
Última edición por cesa_r; 18/02/2014 a las 02:04
  #9 (permalink)  
Antiguo 18/02/2014, 12:02
 
Fecha de Ingreso: marzo-2010
Mensajes: 50
Antigüedad: 14 años, 1 mes
Puntos: 0
Respuesta: paginacion con filtro de select
Cita:
Iniciado por cesa_r Ver Mensaje
Código Javascript: 
Ver original
  1. // JavaScript Document
  2. $(document).ready(function() {
  3.      $ = jQuery.noConflict();   
  4.      
  5.      function recargarS3(val){
  6.          $('#contenedor').html("<img src='img/loading.gif' width='160' height='24'>"); 
  7.          $.ajax({
  8.              url: 'data/proseso.php',
  9.              data: 'heroe='+val,
  10.              success: function(resp){
  11.                  $('#contenedor').html(resp);
  12.              }
  13.          }); 
  14.      }
  15.      
  16.      $(document).on('click', '#pagination-clean li', function(e) {
  17.           e.preventDefault();
  18.           
  19.           var depage = $(this).attr("data"),
  20.               val = $(this).parent().attr("val"); //Vuelves a tomar el valor sobre el cual estas paginando.
  21.           var dataString = 'page='+depage+'&heroe='+val;
  22.          
  23.  
  24.           $.ajax({
  25.               type: "GET",
  26.               url: 'data/proseso.php',
  27.               data: dataString,
  28.               success: function(data) {
  29.                   $('#contenedor').html(data);
  30.                  
  31.               }
  32.           });
  33.           
  34.       });
  35. });

Código PHP: 
Ver original
  1. if (isset($_GET['page'])) {
  2.      $page = $_GET['page'];
  3.  } else {
  4.      $page = 1;
  5.  }
  6.  
  7.  $opcion = $_GET['heroe']; 
  8.  
  9.  $cur_page = $page;
  10.  $page -= 1;
  11.  $per_page = 12; //NUMERO DE REGISTROS POR PAGINA
  12.  $previous_btn = true; //HABILITAR O DESABILITAR PAGINA ANTERIOR (true o false)
  13.  $next_btn = true; //HABILITAR O DESABILITAR PAGINA SIGUIENTE (true o false)
  14.  $first_btn = false; //HABILITAR O DESABILITAR PRIMERA PAGINA (true o false)
  15.  $last_btn = false; //HABILITAR O DESABILITAR ULTIMA PAGINA (true o false)
  16.  $start = $page * $per_page;
  17.  
  18.  
  19.  $query_myconsulta = "SELECT COUNT(*) AS conteo FROM tblmytabla WHERE iglediente='".$opcion."'";
  20.  $consulta_myconsulta = mysql_query($query_myconsulta, $myconexion) or die(mysql_error());
  21.  $row = mysql_fetch_array($consulta_myconsulta, MYSQL_ASSOC);
  22.  
  23.  $count = $row['conteo'];
  24.  $no_of_paginations = ceil($count/$per_page);
  25.  
  26.   //ACA SE SELECCIONAN TODOS LOS DATOS DE LA TABLA
  27.  
  28.  $query_myconsulta2 = "SELECT * FROM tblmytabla WHERE iglediente='".$opcion."' LIMIT $start, $per_page";
  29.  $consulta_myconsulta2  = mysql_query($query_myconsulta2, $myconexion) or die(mysql_error());
  30.  $row_myconsulta2  = mysql_fetch_assoc($consulta_myconsulta2); 
  31.  
  32.         
  33.  if ($count > 0) { // SI HAY MAS DE UN REGISTRO 
  34.      while ($row_myconsulta2 = mysql_fetch_assoc($consulta_myconsulta2)); { //TUS REGISTROS 
  35.     }  
  36.  } 
  37.  
  38.  
  39. /* ---------------Calculo de los valores inicio y final----------------------------------- */
  40. if ($cur_page >= 7) {
  41.     $start_loop = $cur_page - 3;
  42.     if ($no_of_paginations > $cur_page + 3)
  43.         $end_loop = $cur_page + 3;
  44.     else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 6) {
  45.         $start_loop = $no_of_paginations - 6;
  46.         $end_loop = $no_of_paginations;
  47.     } else {
  48.         $end_loop = $no_of_paginations;
  49.     }
  50. } else {
  51.     $start_loop = 1;
  52.     if ($no_of_paginations > 7)
  53.         $end_loop = 7;
  54.     else
  55.         $end_loop = $no_of_paginations;
  56. }
  57. /* ----------------------------------------------------------------------------------------------------------- */
  58. $msg = "";
  59. $msg .= "<ul id='pagination-clean' val='$opcion'>";
  60. $msg .= "<li class='description'>Películas $cur_page de $no_of_paginations</li>";
  61.  
  62. if ($first_btn && $cur_page > 1) {
  63.     $msg .= "<li data='1' class='previous'>Primera</li>";
  64. } else if ($first_btn) {
  65.  
  66.     $msg .= "<li data='1' class='previous-off'>Primera</li>";
  67. }
  68.  
  69. if ($previous_btn && $cur_page > 1) {
  70.     $pre = $cur_page - 1;
  71.     $msg .= "<li data='$pre' class='previous'><a href='#'>&laquo; Anterior</a></li>";
  72. } else if ($previous_btn) {
  73.     $msg .= "<li class='previous-off'>&laquo; Anterior</li>";
  74. }
  75. for ($i = $start_loop; $i <= $end_loop; $i++) {
  76.  
  77.     if ($cur_page == $i)
  78.         $msg .= "<li data='$i' class='active'>{$i}</li>";
  79.     else
  80.         $msg .= "<li data='$i'><a href='#'>{$i}</a></li>";
  81. }
  82.  
  83. // BOTON SIGUIENTE
  84. if ($next_btn && $cur_page < $no_of_paginations) {
  85.     $nex = $cur_page + 1;
  86.     $msg .= "<li data='$nex' class='next'><a href='#'>Siguiente &raquo;</a></li>";
  87. } else if ($next_btn) {
  88.     $msg .= "<li class='next-off'>Siguiente &raquo;</li>";
  89. }
  90.  
  91. // BOTON ANTERIOR
  92. if ($last_btn && $cur_page < $no_of_paginations) {
  93.     $msg .= "<li data='$no_of_paginations' class='next'>Ultima</li>";
  94. } else if ($last_btn) {
  95.     $msg .= "<li data='$no_of_paginations' class='next-off'>Ultima</li>";
  96. }
  97. $msg = $msg . "</ul>"; 
  98. echo $msg;

Código CSS: 
Ver original
  1. /* -------------------------------------------- */
  2. /* ------------- Pagination: Clean ------------ */
  3. /* -------------------------------------------- */
  4. #pagination-clean { margin: 0; text-align: right; padding: 15px; font-family: "Times New Roman", Times, serif; }
  5. #pagination-clean li { border-right:solid 1px #DEDEDE; margin:0; padding:3px 6px; font-size:12px; list-style:none; /* savers */ display: inline-block; }
  6. /* savers #pagination-clean li,*/
  7. #pagination-clean li:last-child { border-right: 0; }
  8. #pagination-clean li.description {  border-right:solid 1px #DEDEDE; margin-right:2px; font-size: 12px; color: #666; border-right:solid 1px #DEDEDE;  }
  9. #pagination-clean a           { margin-right:2px; }
  10. #pagination-clean .previous-off,
  11. #pagination-clean .next-off   { color:#888888;  font-weight:bold; padding:3px 4px; border: none; }
  12. #pagination-clean .next ,
  13. #pagination-clean previous a  { border:none; font-weight:bold; }
  14. #pagination-clean .active     { color:#000000;    /* savers */ border-right:solid 1px #DEDEDE; }
  15. #pagination-clean a:link,
  16. #pagination-clean a:visited   { color:#0e509e; text-decoration:none; }
  17. #pagination-clean a:hover     { text-decoration:underline; }

Pruebalo y luego me dices.


Exelente men gracias por tu ayuda en verdad me ayudo de mucho
  #10 (permalink)  
Antiguo 18/02/2014, 13:05
 
Fecha de Ingreso: julio-2013
Mensajes: 158
Antigüedad: 10 años, 9 meses
Puntos: 6
Respuesta: paginacion con filtro de select
Me alegra que te hubiese ayudado

Etiquetas: ajax, funcion, html, javascript, paginacion, php, select
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 10:57.