Tengo una lista de productos, los cuales se muestran por bloques de 20 en 20, y se pueden ver presionando botones de pág. siguiente o pág. anterior (NO se cambia el URL). Ahora, los datos que se muestran pueden editarse, y al hacerlo se actualiza la página para poder ver estos cambios. El problema es que, al actualizar, me retorna al primer bloque, y quisiera que se quedara en el bloque actual. Es decir, si cambio un dato del producto 45, se actualice, pero se quede la página mostrando los productos del 41 al 60 (recordando que se ven de 20 en 20). Actualmente, si cambio el 45, actualiza y retorna al producto 1..Gracias!.
Otro planteamiento es q me refresque pero en el bloque donde estoy, actualmente, si actualizo la página, me retorna al bloque 1, quisiera que, si estoy en el bloque 3 y refresco la página, se quede en el bloque 3
con este modal indico los cambios:
<div id="editProductModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<form name="edit_product" id="edit_product">
<div class="modal-header">
<h4 class="modal-title">Indicar cantidad</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Cantidad</label>
<input type="text" name="edit_cantidad" id="edit_cantidad" class="form-control" required>
<input type="hidden" name="edit_total" id="edit_total">
</div>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancelar">
<input type="submit" class="btn btn-info" value="Aceptar">
</div>
</form>
</div>
</div>
</div>
este es el script
$(function() {load(1);});
function load(page){
var query=$("#q").val();
var per_page=30;
var parametros = {"action":"ajax","page":page,'query':query,'per_page':per_page};
$("#loader").fadeIn('slow');
$.ajax({url:'ajax/listar_productos.php',
data: parametros,
beforeSend: function(objeto){
$("#loader").html("Cargando...");
},
success:function(data){
$(".outer_div").html(data).fadeIn('slow');
$("#loader").html("");
}
})
}
$('#editProductModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var cliente = button.data('cliente')
$('#edit_cliente').val(cliente)
var sucursal = button.data('sucursal')
$('#edit_sucursal').val(sucursal)
var producto = button.data('producto')
$('#edit_producto').val(producto)
var codigo = button.data('codigo')
$('#edit_codigo').val(codigo)
var categoria = button.data('categoria')
$('#edit_categoria').val(categoria)
var unidad = button.data('unidad')
$('#edit_unidad').val(unidad)
var precio = button.data('precio')
$('#edit_precio').val(precio)
var cantidad = button.data('cantidad')
$('#edit_cantidad').val(cantidad)
var id = button.data('id')
$('#edit_id').val(id)
})
$("#edit_product" ).submit(function( event ) {
var parametros = $(this).serialize();
$.ajax({
type: "POST",
url: "ajax/editar_producto.php",
data: parametros,
beforeSend: function(objeto){
$("#resultados").html("Enviando...");
},
success: function(datos){
$("#resultados").html(datos);
load(1);
$('#editProductModal').modal('hide');
}
});
event.preventDefault();
});
el php que hace la edición en sql
session_start();
$tbl=$_SESSION['ordensuc'];
$ordenglobal=$_SESSION['orden'];
if (empty($_POST['edit_id'])){
$errors[] = "ID está vacío.";
} elseif (!empty($_POST['edit_id'])){
require_once ("../conexion.php");
$cantidad = mysqli_real_escape_string($con,(strip_tags($_POST["edit_cantidad"],ENT_QUOTES)));
$orden_id = $_POST["edit_id"];
$sql = "UPDATE $tbl SET cantidad='".$cantidad."', total='".$total."' WHERE id='".$orden_id."' ";
$query = mysqli_query($con,$sql);
}
donde se actualiza el listado de productos
session_start();
$ordenglobal=$_SESSION['orden'];
$ordensuc=$_SESSION['ordensuc'];
/* Connect To Database*/
require ("../conexion.php");
$action = (isset($_REQUEST['action'])&& $_REQUEST['action'] !=NULL)?$_REQUEST['action']:'';
if($action == 'ajax'){
$query = mysqli_real_escape_string($con,(strip_tags($_REQUEST['query'], ENT_QUOTES)));
$tables=$ordensuc;
$campos="*";
$sWhere=" ".$ordensuc.".producto LIKE '%".$query."%'";
$sWhere.=" order by ".$ordensuc.".producto";
include 'pagination.php'; //include pagination file
//pagination variables
$page = (isset($_REQUEST['page']) && !empty($_REQUEST['page']))?$_REQUEST['page']:1;
$per_page = intval($_REQUEST['per_page']); //how much records you want to show
$adjacents = 4; //gap between pages after number of adjacents
$offset = ($page - 1) * $per_page;
//Count the total number of row in your table*/
$count_query = mysqli_query($con,"SELECT count(*) AS numrows FROM $tables where $sWhere ");
if ($row= mysqli_fetch_array($count_query)){$numrows = $row['numrows'];}
else {echo mysqli_error($con);}
$total_pages = ceil($numrows/$per_page);
//main query to fetch the data
$query = mysqli_query($con,"SELECT $campos FROM $tables where $sWhere LIMIT $offset,$per_page");
//loop through fetched data
if ($numrows>0){
?>
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th class='text-center'></th>
<th class='text-center'>Codigo</th>
<th>Producto</th>
<th>Categoria</th>
<th>Unidad</th>
<th>Cantidad</th>
<th></th>
</tr>
</thead>
<tbody>
<?php
$finales=0;
while($row = mysqli_fetch_array($query)){
$orden_id=$row['id'];
$orden_codigo=$row['codigo'];
$orden_producto=$row['producto'];
$orden_categoria=$row['categoria'];
$orden_unidad=$row['unidad'];
$orden_precio=$row['precio'];
$orden_cantidad=$row['cantidad'];
$orden_total=$row['total'];
$orden_image=$row['image'];
$finales++;
?>
<tr class="<?php echo $text_class;?>">
<td class='text-center'><img src=<?php echo "../images/".$orden_image;?> height="50" width="50"></img></td>
<td class='text-center'><?php echo $orden_codigo;?></td>
<td ><?php echo $orden_producto;?></td>
<td ><?php echo $orden_categoria;?></td>
<td class='text-center' ><?php echo $orden_unidad;?></td>
<td ><?php echo $orden_cantidad;?></td>
<td>
<a href="#" data-target="#editProductModal" class="edit" data-toggle="modal" data-producto="<?php echo $orden_producto?>" data-codigo="<?php echo $orden_codigo?>" data-categoria="<?php echo $orden_categoria?>" data-unidad="<?php echo $orden_unidad?>" data-precio="<?php echo $orden_precio?>" data-cantidad="<?php echo $orden_cantidad?>" data-total="<?php echo $orden_total?>" data-id="<?php echo $orden_id?>"><i class="material-icons" data-toggle="tooltip" title="Editar" ></i></a>
</td>
</tr>
<?php }?>
<tr>
<td colspan='6'>
<?php
$inicios=$offset+1;
$finales+=$inicios -1;
echo "Mostrando $inicios al $finales de $numrows registros";
echo paginate( $page, $total_pages, $adjacents);
?>
</td>
</tr>
</tbody>
</table>
</div>
<?php
}
}
?>
****y vuelve a paginar****
<?php
function paginate($page, $tpages, $adjacents) {
$prevlabel = "‹ Anterior";
$nextlabel = "Siguiente ›";
$out = '<ul class="pagination pull-right">';
// previous label
if($page==1) {
$out.= "<li class='page-item disabled'><a>$prevlabel</a></li>";
} else if($page==2) {
$out.= "<li class='page-item'><a href='javascript:void(0);' onclick='load(1)'>$prevlabel</a></li>";
}else {
$out.= "<li class='page-item'><a href='javascript:void(0);' onclick='load(".($page-1).")'>$prevlabel</a></li>";
}
// first label
if($page>($adjacents+1)) {
$out.= "<li class='page-item'><a href='javascript:void(0);' onclick='load(1)'>1</a></li>";
}
// interval
if($page>($adjacents+2)) {
$out.= "<li class='page-item'><a>...</a></li>";
}
// pages
$pmin = ($page>$adjacents) ? ($page-$adjacents) : 1;
$pmax = ($page<($tpages-$adjacents)) ? ($page+$adjacents) : $tpages;
for($i=$pmin; $i<=$pmax; $i++) {
if($i==$page) {
$out.= "<li class='active page-item'><a>$i</a></li>";
}else if($i==1) {
$out.= "<li class='page-item'><a href='javascript:void(0);' onclick='load(1)'>$i</a></li>";
}else {
$out.= "<li class='page-item'><a href='javascript:void(0);' onclick='load(".$i.")'>$i</a></li>";
}
}
// interval
if($page<($tpages-$adjacents-1)) {
$out.= "<li class='page-item'><a>...</a></li>";
}
// last
if($page<($tpages-$adjacents)) {
$out.= "<li class='page-item'><a href='javascript:void(0);' onclick='load($tpages)'>$tpages</a></li>";
}
// next
if($page<$tpages) {
$out.= "<li class='page-item'><a href='javascript:void(0);' onclick='load(".($page+1).")'>$nextlabel</a></li>";
}else {
$out.= "<li class='disabled page-item'><a>$nextlabel</a></li>";
}
$out.= "</ul>";
return $out;
}
?>