PHPで動作しないsimplePagination.js MySQLデータベース検索

Question

フォームを使用して、header.phpファイルにMySQLデータベースのPHP検索を作成しました。 PHPでsimplePagination.jsを使用しようとしています。結果の数を正しく計算し、適切な量のページリンクを表示することができました。ただし、search.phpはページ上の項目数を制限していないため、ページネーションリンクのすべてが空白ページになります。

<form action="search.php" method="POST"> 
     <input type="text" name="search" placeholder="search site"> 
     <button type="submit" name="submit-search"><img src="../assets/search icon-05.png"></button> 
</form> 

search.phpコード：

<?php 
include 'header.php'; 
?> 
<section class="searchPage"> 
<div class="searchResults"> 
    <?php 
     if (isset($_POST['submit-search'])){ 
      $searchTerm = trim((string) $_POST['search']); 

      if (isset($searchTerm[0])) { 
       $search = mysqli_real_escape_string($conn, $_POST['search']); 
       $sql = "SELECT * FROM articles WHERE title LIKE '%$search%' OR abstract LIKE '%$search%' OR keywords LIKE '%$search%'"; 
       $result = mysqli_query($conn, $sql); 
       $queryResult = mysqli_num_rows($result); 
       $limit = 10; 
       $numberOfPages = ceil($queryResult/$limit); 

       if ($queryResult > 0){ 
        echo $queryResult . " results found"; 

        while ($row = mysqli_fetch_assoc($result)){ 
         echo "<div class='articleItem'> 
          <h2>".$row['title']."</h2> 
          <p>".$row['abstract']."</p> 
          <a href=".$row['link']." target='_blank'>".$row['link']."</a> 
         </div>"; 
        } 

        $pageLinks = "<nav><ul class='pagination'>"; 
        for ($i=1; $i<=$numberOfPages; $i++) { 
         $pageLinks .= "<li><a href='search.php?page=".$i."'>".$i."</a></li>"; 
        }; 
        echo $pageLinks . "</ul></nav>"; 
       } 
       else { 
       echo "There are no results matching your search."; 
      } 
      } 

     } 
    ?> 
</div> 
</section> 
<script type="text/javascript"> 
$(document).ready(function(){ 
     $('.pagination').pagination({ 
       items: <?php echo $queryResult;?>, 
       itemsOnPage: <?php echo $limit;?>, 
       currentPage : <?php echo $page;?>, 
       hrefTextPrefix : 'search.php?page=' 
      }); 
      }); 
</script> 

Answer 1

このプラグインは、JavaScriptのイベントを通じて何をするかであるので、あなたは、あなた自身のページリンクを作成する必要はありません。したがって、ulをdiv要素で置き換えることができます。これが空白のページを取得する理由です。以下で

echo "<nav><div class='pagination'></div></nav>"; 

私はそれを動作させるために追加するものです。

$(document).ready(function(){ 
var pageParts = $(".articleItem"); 
pageParts.slice(<?php echo $limit;?>).hide(); 
$('.pagination').pagination({ 
     items: <?php echo $queryResult;?>, 
     itemsOnPage: <?php echo $limit;?>, 
     onPageClick: function(pageNum) { 
      var start = <?php echo $limit;?> * (pageNum - 1); 
      var end = start + <?php echo $limit;?>; 
      pageParts.hide().slice(start, end).show(); 
     } 
}); 

}）;