Código Javascript
:
Ver original// JavaScript Document
$(document).ready(function() {
$ = jQuery.noConflict();
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);
}
});
}
$(document).on('click', '#pagination-clean li', function(e) {
e.preventDefault();
var depage = $(this).attr("data"),
val = $(this).parent().attr("val"); //Vuelves a tomar el valor sobre el cual estas paginando.
var dataString = 'page='+depage+'&heroe='+val;
$.ajax({
type: "GET",
url: 'data/proseso.php',
data: dataString,
success: function(data) {
$('#contenedor').html(data);
}
});
});
});
Código PHP:
Ver originalif (isset($_GET['page'])) { $page = $_GET['page'];
} else {
$page = 1;
}
$opcion = $_GET['heroe'];
$cur_page = $page;
$page -= 1;
$per_page = 12; //NUMERO DE REGISTROS POR PAGINA
$previous_btn = true; //HABILITAR O DESABILITAR PAGINA ANTERIOR (true o false)
$next_btn = true; //HABILITAR O DESABILITAR PAGINA SIGUIENTE (true o false)
$first_btn = false; //HABILITAR O DESABILITAR PRIMERA PAGINA (true o false)
$last_btn = false; //HABILITAR O DESABILITAR ULTIMA PAGINA (true o false)
$start = $page * $per_page;
$query_myconsulta = "SELECT COUNT(*) AS conteo FROM tblmytabla WHERE iglediente='".$opcion."'";
$count = $row['conteo'];
$no_of_paginations = ceil($count/$per_page);
//ACA SE SELECCIONAN TODOS LOS DATOS DE LA TABLA
$query_myconsulta2 = "SELECT * FROM tblmytabla WHERE iglediente='".$opcion."' LIMIT $start, $per_page";
if ($count > 0) { // SI HAY MAS DE UN REGISTRO
while ($row_myconsulta2 = mysql_fetch_assoc($consulta_myconsulta2)); { //TUS REGISTROS }
}
/* ---------------Calculo de los valores inicio y final----------------------------------- */
if ($cur_page >= 7) {
$start_loop = $cur_page - 3;
if ($no_of_paginations > $cur_page + 3)
$end_loop = $cur_page + 3;
else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 6) {
$start_loop = $no_of_paginations - 6;
$end_loop = $no_of_paginations;
} else {
$end_loop = $no_of_paginations;
}
} else {
$start_loop = 1;
if ($no_of_paginations > 7)
$end_loop = 7;
else
$end_loop = $no_of_paginations;
}
/* ----------------------------------------------------------------------------------------------------------- */
$msg = "";
$msg .= "<ul id='pagination-clean' val='$opcion'>";
$msg .= "<li class='description'>Películas $cur_page de $no_of_paginations</li>";
if ($first_btn && $cur_page > 1) {
$msg .= "<li data='1' class='previous'>Primera</li>";
} else if ($first_btn) {
$msg .= "<li data='1' class='previous-off'>Primera</li>";
}
if ($previous_btn && $cur_page > 1) {
$pre = $cur_page - 1;
$msg .= "<li data='$pre' class='previous'><a href='#'>« Anterior</a></li>";
} else if ($previous_btn) {
$msg .= "<li class='previous-off'>« Anterior</li>";
}
for ($i = $start_loop; $i <= $end_loop; $i++) {
if ($cur_page == $i)
$msg .= "<li data='$i' class='active'>{$i}</li>";
else
$msg .= "<li data='$i'><a href='#'>{$i}</a></li>";
}
// BOTON SIGUIENTE
if ($next_btn && $cur_page < $no_of_paginations) {
$nex = $cur_page + 1;
$msg .= "<li data='$nex' class='next'><a href='#'>Siguiente »</a></li>";
} else if ($next_btn) {
$msg .= "<li class='next-off'>Siguiente »</li>";
}
// BOTON ANTERIOR
if ($last_btn && $cur_page < $no_of_paginations) {
$msg .= "<li data='$no_of_paginations' class='next'>Ultima</li>";
} else if ($last_btn) {
$msg .= "<li data='$no_of_paginations' class='next-off'>Ultima</li>";
}
$msg = $msg . "</ul>";
echo $msg;
Código CSS:
Ver original/* -------------------------------------------- */
/* ------------- Pagination: Clean ------------ */
/* -------------------------------------------- */
#pagination-clean { margin: 0; text-align: right; padding: 15px; font-family: "Times New Roman", Times, serif; }
#pagination-clean li { border-right:solid 1px #DEDEDE; margin:0; padding:3px 6px; font-size:12px; list-style:none; /* savers */ display: inline-block; }
/* savers #pagination-clean li,*/
#pagination-clean li:last-child { border-right: 0; }
#pagination-clean li.description { border-right:solid 1px #DEDEDE; margin-right:2px; font-size: 12px; color: #666; border-right:solid 1px #DEDEDE; }
#pagination-clean a { margin-right:2px; }
#pagination-clean .previous-off,
#pagination-clean .next-off { color:#888888; font-weight:bold; padding:3px 4px; border: none; }
#pagination-clean .next ,
#pagination-clean previous a { border:none; font-weight:bold; }
#pagination-clean .active { color:#000000; /* savers */ border-right:solid 1px #DEDEDE; }
#pagination-clean a:link,
#pagination-clean a:visited { color:#0e509e; text-decoration:none; }
#pagination-clean a:hover { text-decoration:underline; }
Pruebalo y luego me dices.