11092 sujets

JavaScript, DOM et API Web HTML5

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 :

<?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 !
Modérateur
Et l'eau,

Je vois pas mal d'erreurs.... je comprends rien à ce que tu essaies de faire. Tu veux paginer ? Il y a des erreurs. Ce n'est pas tout à fait ça. Tu veux voir le contenu d'un sujet ? Dans ce cas-là où est ta requête ?
Meilleure solution