productos

listaprod.php

@@ -15,15 +15,47 @@ $statement->execute();
 $statement->store_result();
 $statement->bind_result($nombre,$desc,$descripcion);
 $count=$statement->num_rows;
-$productos = array();
+/*        var productos = [] ;
+        $.each(prod, function(i, item) {
+            var proddiv = $('<div/>', {
+                class: 'producto',
+                html:   item['html']
+            });
+            var img = "Images/producto.jpg";
+            productos.push(proddiv);
+        });
+        
+        
+        var lista_prod  = $('<div/>', {
+            id: 'lista_productos',
+            html: productos
+        });
+        var pagina = $('<div/>', {
+            id: 0, //incrementar
+            class: 'pagina',
+            html: lista_prod
+        });
+*/
+$i=0;
+$pag=0;
 while ( $statement->fetch() ) {
-	$html ='<div style="float : left;  width:15%;"><img src="Images/producto.jpg"></div>
-	<div style="float : left; width: 74%;">
-	<h4>' . $nombre . '</h4><br>' . $desc . '<br><br><u>Ver más</u></div>';
-	
-	array_push($productos, array("html" => utf8_encode($html)));
-}
-$array = array("count" => $count, "productos" => $productos);
+    if (($i-1) % 3 || $i == 0) {
+        echo "<div class='pagina' id='pagina$pag'>\n";
+        echo "<div class='listaproductos'>\n";
+        $pag++;
+    }
+	$html ="<div style='float:left;  width:15%;'>
+                <img src='Images/producto.jpg'>
+            </div>
+            <div style='float : left; width: 74%;'>
+                <h4>$nombre</h4><br>$desc<br><br><u>Ver más</u>
+            </div>";
+    echo $html;
 
-echo(json_encode($array));
-?>
+    if ($i % 3) {
+        echo "</div>"; //pagina
+        echo "</div>"; //listaprod
+    }
+    $i++;
+}
+?>

productos.php

@@ -10,35 +10,18 @@
 <script>
 $(document).ready(function() {
 	curpag=1;
-	$.getJSON('listaprod.php', { cat : 'Limpieza' }).done(function(data) {
-		var count = data['count'];
-		var prod = data['productos'];
-		if (count > 3) {
-			alert("error > 3");
-		}
-		
-		var productos = [] ;
-		$.each(prod, function(i, item) {
-			var proddiv = $('<div/>', {
-				class: 'producto',
-				html: 	item['html']
-			});
-			var img = "Images/producto.jpg";
-			productos.push(proddiv);
-		});
-		
-		
-		var lista_prod  = $('<div/>', {
-			id: 'lista_productos',
-			html: productos
-		});
-		var pagina = $('<div/>', {
-			id: 0, //incrementar
-			class: 'pagina',
-			html: lista_prod
-		});
-		$("#paginas_wrapper").append(pagina);
+    var cat = 'Limpieza';
+    $(".cambiarcat").click(function() {
+        cat = $(this).attr('val');
+        getData();
+    });
+    function getData() {
+	$.get('listaprod.php', { cat : cat }).done(function(data) {
+		$("#paginas_wrapper").html(data);
 	});
+} //getData
+    getData();
+
 	$(".next").click(function() {
 		if ( ! $(".pagina[num='"+(curpag+1)+"']").length )
 			return;
@@ -91,21 +74,26 @@ $(document).ready(function() {
         <br />
         <div id="productosbar">
             <ul id ="categorias">
-                <a href=""><li><h3>LIMPIEZA</h3></li></a>
-
-                <li><h3>MÁSCARAS</h3></li>
-
-                <li><h3>ÁCIDO<br />HIALURÓNICO</h3></li>
-                <li><h3>PEELING</h3></li>
-                <li><h3>CORPORALES</h3></li>
-                <li><h3>HOMBRES</h3></li>
-                <li><h3>PROTECCIÓN<br />INTENSIVA</h3></li>
-                <li><h3>MONODOSIS</h3></li>
-                <li><h3>ACTIVOS<br />CONCENTRADOS</h3></li>
+                <li class="cambiarcat" val="limpieza"><h3>LIMPIEZA</h3></li>
+                <li class="cambiarcat" val="mascara"><h3>MÁSCARAS</h3></li>
+                <li class="cambiarcat" val="acido hialuronico"><h3>ÁCIDO<br />HIALURÓNICO</h3></li>
+                <li class="cambiarcat" val="peeling"><h3>PEELING</h3></li>
+                <li class="cambiarcat" val="corporales"><h3>CORPORALES</h3></li>
+                <li class="cambiarcat" val="hombres"><h3>HOMBRES</h3></li>
+                <li class="cambiarcat" val="proteccion intesiva"><h3>PROTECCIÓN<br />INTENSIVA</h3></li>
+                <li class="cambiarcat" val="monodosis"><h3>MONODOSIS</h3></li>
+                <li class="cambiarcat" val="activos concentrados"><h3>ACTIVOS<br />CONCENTRADOS</h3></li>
             </ul>
         </div>
         
         <div id ="paginas_wrapper">
+
+        </div>
+        
+    </div>
+
+</body>
+</html>
 <!--            <div num="" class="pagina" >
                 <div class="nav" style="display: inline; float: left; height: 30px; margin-top: 170px;">
                     <label for="img-1" class="prev">&#x2039;</label>
@@ -132,10 +120,3 @@ $(document).ready(function() {
 			<ul id="paginas_list">
 			</ul>-->
 
-        </div>
-        
-    </div>
-
-</body>
-</html>
-