Infinite Scroll Pagination PDO PHP Ajax MYSQL 2024
Aquí está el código PHP adaptado para utilizar PDO en lugar de la extensión mysqli:
php
Copy code
<!DOCTYPE html>
<html>
<head>
<title>PHP infinite scroll pagination</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style type="text/css">
.ajax-load{
background: #e1e1e1;
padding: 10px 0px;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<h2 class="text-center">PHP infinite scroll pagination</h2>
<br/>
<div class="col-md-12" id="post-data">
<?php
require('db_config.php');
$sql = "SELECT * FROM posts ORDER BY id DESC LIMIT 8";
$stmt = $pdo->query($sql);
$posts = $stmt->fetchAll(PDO::FETCH_ASSOC);
include('data.php');
?>
</div>
</div>
<div class="ajax-load text-center" style="display:none">
<p><img src="http://demo.itsolutionstuff.com/plugin/loader.gif">Loading More post</p>
</div>
<script type="text/javascript">
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $(document).height()) {
var last_id = $(".post-id:last").attr("id");
loadMoreData(last_id);
}
});
function loadMoreData(last_id){
$.ajax({
url: 'loadMoreData.php?last_id=' + last_id,
type: "get",
beforeSend: function() {
$('.ajax-load').show();
}
})
.done(function(data) {
$('.ajax-load').hide();
$("#post-data").append(data);
})
.fail(function(jqXHR, ajaxOptions, thrownError) {
alert('server not responding...');
});
}
</script>
</body>
</html>
data.php:
php
Copy code
<?php
foreach ($posts as $post) {
?>
<div class="post-id" id="<?php echo $post['id']; ?>">
<h3><a href=""><?php echo $post['title']; ?></a></h3>
<p><?php echo $post['description']; ?></p>
<div class="text-right">
<button class="btn btn-success">Read More</button>
</div>
<hr style="margin-top:5px;">
</div>
<?php
}
?>
loadMoreData.php:
php
Copy code
<?php
require('db_config.php');
$sql = "SELECT * FROM posts WHERE id < :last_id ORDER BY id DESC LIMIT 8";
$stmt = $pdo->prepare($sql);
$stmt->bindParam(':last_id', $_GET['last_id']);
$stmt->execute();
$posts = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($posts);
?>
db_config.php:
php
Copy code
<?php
define('DB_USER', 'root');
define('DB_PASSWORD', 'root');
define('DB_DATABASE', 'sole');
define('DB_HOST', 'localhost');
try {
$pdo = new PDO('mysql:host=' . DB_HOST . ';dbname=' . DB_DATABASE, DB_USER, DB_PASSWORD);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
die('Connection failed: ' . $e->getMessage());
}
?>
Este código utiliza PDO para conectarse a la base de datos MySQL y ejecutar consultas SQL. Asegúrate de tener los archivos db_config.php, data.php y loadMoreData.php en el lugar correcto y de tener la base de datos y la tabla adecuadas en tu servidor MySQL.
Comentarios
Publicar un comentario