simplePagination.js不适用于php MySQL数据库搜索

Question

Used a form to create a php search for a MySQL database in a header.php file. Attempting to use simplePagination.js with php. I am able to correctly calculate the number of results and display the appropriate amount of page links. However, search.php is not limiting the number of items on the page, and all of the pagination links lead to a blank page.

 <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 code:

<?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

You don't need to create the page links on your own, because this is what the plugin does through JavaScript events. So you can replace the ul with a div element. This is the reason why you get a blank page.

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

In the following is what I added to make it work:

$(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();
        }
}); 

});