Bonjour,
J'ai un problème avec un script "load more", c'est à dire chercher du contenu en paginant seulement avec un bouton suivant.
Voici le script :
Le problème est que je n'ai que 3 lignes de tableau qui se chargent à la base. Mais impossible de charger le contenu suivant.
Le probléme vient bien de cette page PHP, car en bidouillant j'arrive à avoir des réslultats (mais désordonnés, etc.).
Voici la page d'index si besoin :
Bonne journée et merci !
J'ai un problème avec un script "load more", c'est à dire chercher du contenu en paginant seulement avec un bouton suivant.
Voici le script :
<?php
require_once('dbConfig.php');
$limit = 3;
if (isset($_POST['page_no'])) {
$page = $_POST['page_no'];
}else{
$page = 0;
}
$req = $bdd->query("SELECT * FROM sujets LIMIT $page, $limit");
if ($req->rowCount() > 0) {
$output = "";
$output .= "<tbody>";
while ($row = $req->fetch(PDO::FETCH_ASSOC)) {
$last_id = $row['sujet_id'];
$output.="<tr>
<td>{$row["sujet_titre"]}</td>
<td>{$row["sujet_auteur"]}</td>
<td>{$row["sujet_nbr_messages"]}</td>
<td>{$row["sujet_date"]}</td>
</tr>";
}
$output .= "<tbody>";
$output .= "<tbody id='pagination'>
<tr>
<td colspan='5'><button class='btn btn-success loadbtn' data-id='{$last_id}' style='margin-left:500px'>Plus de sujets</button></td>
</tr>
</tbody>";
echo $output;
}
?>Le problème est que je n'ai que 3 lignes de tableau qui se chargent à la base. Mais impossible de charger le contenu suivant.
Le probléme vient bien de cette page PHP, car en bidouillant j'arrive à avoir des réslultats (mais désordonnés, etc.).
Voici la page d'index si besoin :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
<table class="table table-striped" id="loadData">
<thead>
<tr>
<th class="col-lg-6">Titre</th>
<th class="col-lg-2">Auteur</th>
<th class="col-lg-1">Messages</th>
<th class="col-lg-3">Date</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
loadMoreData();
function loadMoreData(page){
$.ajax({
url : "load-more.php",
type: "POST",
cache:false,
data:{page_no:page},
success:function(data){
if (data) {
$("#pagination").remove();
$("#loadData").append(data);
}else{
$(".loadbtn").prop("disabled", true);
$(".loadbtn").html('That is All');
}
}
});
}
$(document).on('click', '.loadbtn', function(){
$(".loadbtn").html('Loading...');
var pId = $(this).data("id");
loadMoreData(pId);
});
});
</script>Bonne journée et merci !
