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

Question

使用表单在 header.php 文件中创建 MySQL 数据库的 php 搜索。尝试将 simplePagination.js 与 php 一起使用。我能够正确计算结果数量并显示适当数量的页面链接。但是，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();
        }
}); 

});