paginacion ajax ,mysql , php renovada 2.0
en el post pasado publicamos una paginacion excelente pues bien os traigo una nueva version mucho mas versatil y mas estable que de seguro a muchos les gustara pueden seguir el siguiente demo en la sigueinte direccion para que chequen y lo vean en marcha .
Manos a la obra vamos por el codigo :
Database
para nuestro ejemplo crearemos una tabla con 2 columnas algo muy simple copia el script y ejecutalo en tu phpmyadmin
vamos a nuestro administrador phpmyadmin y creamos la tabla messages:
CREATE TABLE messages ( msg_id INT PRIMARY KEY AUTO_INCREMENT, message VARCHAR(150) );
Y llenamos algunos registros para que nos muestre posterior mente ..
JavaScript Code
Nuestro Codigo Ajax Para la manipulación de la paginación
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
function loading_show()
{
$('#loading').html("<img src='images/loading.gif'/>").fadeIn('fast');
}
function loading_hide()
{
$('#loading').fadeOut();
}
function loadData(page)
{
loading_show();
$.ajax
({
type: "POST",
url: "load_data.php",
data: "page="+page,
success: function(msg)
{
$("#container").ajaxComplete(function(event, request, settings)
{
loading_hide();
$("#container").html(msg);
});
}
});
}
loadData(1); // For first time page load default results
$('#container .pagination li.active').live('click',function(){
var page = $(this).attr('p');
loadData(page);
});
});
</script>
Codigo Css:
<style type="text/css">
body{
margin: 0 auto;
padding: 0;
}
#loading{
width: 100%;
position: absolute;
top: 100px;
left: 100px;
margin-top:200px;
}
#container .pagination ul li.inactive,
#container .pagination ul li.inactive:hover{
background-color:#ededed;
color:#bababa;
border:1px solid #bababa;
cursor: default;
}
#container .data ul li{
list-style: none;
font-family: verdana;
margin: 5px 0 5px 0;
color: #000;
font-size: 13px;
}
#container .pagination{
width: 800px;
height: 25px;
}
#container .pagination ul li{
list-style: none;
float: left;
border: 1px solid #006699;
padding: 2px 6px 2px 6px;
margin: 0 3px 0 3px;
font-family: arial;
font-size: 14px;
color: #006699;
font-weight: bold;
background-color: #f2f2f2;
}
#container .pagination ul li:hover{
color: #fff;
background-color: #006699;
cursor: pointer;
}
.go_button
{
background-color:#f2f2f2;border:1px solid #006699;color:#cc0000;padding:2px 6px 2px 6px;cursor:pointer;position:absolute;margin-top:-1px;
}
.total
{
float:right;font-family:arial;color:#999;
}
</style>
Crea el Archivo load_data.php
Archivo que lee cada vez se haga el llamado ajax.
<?php
if($_POST['page'])
{
$page = $_POST['page'];
$cur_page = $page;
$page -= 1;
$per_page = 15; // Per page records
$previous_btn = true;
$next_btn = true;
$first_btn = true;
$last_btn = true;
$start = $page * $per_page;
include"db.php";
$query_pag_data = "SELECT msg_id,message from messages LIMIT $start, $per_page";
$result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error());
$msg = "";
while ($row = mysql_fetch_array($result_pag_data))
{
$htmlmsg=htmlentities($row['message']); //HTML entries filter
$msg .= "<li><b>" . $row['msg_id'] . "</b> " . $htmlmsg . "</li>";
}
$msg = "<div class='data'><ul>" . $msg . "</ul></div>"; // Content for Data
/* -----Total count--- */
$query_pag_num = "SELECT COUNT(*) AS count FROM messages"; // Total records
$result_pag_num = mysql_query($query_pag_num);
$row = mysql_fetch_array($result_pag_num);
$count = $row['count'];
$no_of_paginations = ceil($count / $per_page);
/* -----Calculating the starting and endign values for the loop----- */
//Some Code. Available in download script
}
?>
Puesta en Marcha en el index.php
<div style="margin-left:250px">
<div align="center" style="font-size:24px;color:#cc0000;font-weight:bold">Pagination with jquery, Ajax and PHP(<a href='http://www.9lessons.info/2010/10/pagination-with-jquery-php-ajax-and.html'>tutorial link</a>)</div>
<div id="loading"></div>
<div id="container">
<div class="data"></div>
<div class="pagination"></div>
</div>
</div>
Y listooo!!!
Descarga Tutorial
Espero que sea de su utilidad y que puedan adaptarlo a sus necesidades!
Suscríbete al feed de arteyanos.com
Si te gustó este post, no te olvides de suscribirte al feed RSS para que recibas las actualizaciones mas recientes antes que nadie
únete a los 530 seguidores
es gratis y toma menos de 2 minutos
[...] Segundo Ejemplo de paginacion 2.0 [...]
hola necesito enviar un valor php mediante esta funcion load Data, el caso es que tengo un campo que recibo tras darle click a un boton y ahora me gustaria pasarlo por la pagina pagination.php para que llegue al destino que seria la pagina load_data.php. Alguien me the aporta alguna idea? estoy algo perdido jijiji saludos!
Lo que hago es esto:
<? $dni = $_POST['oculto2'];?>.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>.
<script type="text/javascript">.
$(document).ready(function(){.
function loading_show(){ $('#loading').html("<img src='images/loading.gif'/>").fadeIn('fast');.
}.
function loading_hide(){ $('#loading').fadeOut('fast'); }.
function loadData(page){ loading_show();.
$.ajax.
({.
type: "POST",
url: "load_data.php",
data: "page="+pagei,
Me gustaria que por aqui:
url: "load_data.php",
data: "page="+pagei,
se recibiera el valor $dni para pasarlo posteriormente a load_data.php.
es susper facil en la parte ajax de js puedes agregar la variable que necesitas
data: “page=”+pagei + “varible=”+ < ?=$var_php?>
listo eso no tiene pierde!!
estimado, he usado su sistema , sin embargo cuando uno realiza demasiados clicks a las paginaciones esta colapsa y queda pegada. Existirá una solución para ello?