使用 bootstrap 4 卡进行分页

Question

我正在使用 bootstrap 4 卡在我的网站上创建一种博客区域，我用我的数据库中的数据填充我的卡。我想将卡片放在带有类别过滤器的分页中

我的类别选择工作正常，但我不确定我应该如何处理计算网页上应该有多少行和列的部分。我知道我可以创建一个变量来保存最大数量的行和列，并使用 ceil 函数计算偏移量。然后将其放入 SQL 查询中，其中 LIMIT 是偏移量和最大项，但我不确定这如何与行一起使用。这是我目前拥有的代码。 `

<nav aria-label="Page navigation example">
        <ul class="pagination justify-content-center">
            <li class="page-item disabled">
                <a class="page-link" href="#" tabindex="-1">Previous</a>
            </li><li class="page-item"><a class="page-link" href="blog.php?category=<?php if (isset($_GET["category"])){echo $_GET["category"];}?>&pagenumber=<?php // this is also where I'm stuck ?>">1</a>
</li>
<li class="page-item"><a class="page-link" href="blog.php?category=<?php if (isset($_GET["category"])){echo $_GET["category"];}?>&pagenumber=<?php // this is also where I'm stuck ?>">2</a></li>
<li class="page-item"><a class="page-link" href="blog.php?category=<?php if (isset($_GET["category"])){echo $_GET["category"];}?>&pagenumber=<?php // this is also where I'm stuck ?>">3</a></li>
            <li class="page-item">
                <a class="page-link" href="#">Next</a>
            </li>
        </ul>
    </nav>

`

该类别有效，例如，如果我选择类别 2，则 url 将是

http://localhost/HCDistributie/blog.php?category=2&pagenumber=

唯一需要的是获取页码。

这是我的后端代码，我循环遍历数据库中的每个项目并将其放入卡片中

    function getNews()
{
    // get current category
    if (isset($_GET["category"]) && is_numeric($_GET["category"])) {
        // bind get category to categoryId
        $categoryId = $_GET["category"];
        // if category is 1
        if ($categoryId == 1) {
            if (isset($_GET["pagenumber"]) && is_numeric($_GET["pagenumber"])) {
                $pageNumber = $_GET["pagenumber"];
                try {
                    $itemLimits = 9;
                    $rowLimit = 3;


                    $db = new Connection();

                    $database = $db->openConnection();

                    $stm = $database->query("SELECT * FROM blog where category = $categoryId");

                    $stm->execute();

                    $rowNews = $stm->fetchAll(PDO::FETCH_ASSOC);

                    foreach ($rowNews as $items) {
                        ?>
                        <div class="card-group">
                            <div id="classContainer" class="col-md-4">
                                <div class="card">
                                    <img src=" <?php $items['img'] ?>" class="card-img-top" alt="...">
                                    <div class="card-body">
                                        <h5 class="card-title"><?php echo $items["title"]; ?></h5>
                                        <p class="card-text"><?php echo $items["content"] ?></p>
                                        <p class="card-text"><small
                                                    class="text-muted"><?php $items["author"]; ?></small>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <?php
                    }

                } catch
                (PDOException $e) {
                    echo sprintf("Something went wrong. $e->errorInfo");
                }
            }
        }
    }
}

我有点知道我应该做什么问题是我不确定如何将其应用于我的代码，我读过的教程只处理最大项目的变量，而我有 2 个最大列和最大行. 我不确定如何分别计算它们。

这是我第一次使用任何形式的分页，所以如果有些事情看起来很奇怪或愚蠢，我深表歉意。

Answer 1

这并不奇怪或愚蠢，第一次接触分页总是很麻烦；）

使用引导程序，您只需知道卡片记录的最大出现次数就可以摆脱困境。您可以在使用 rows 和 cols 时包装所有内容，请查看以下示例：

<div class="container">
  <div class="row">
    <div class="col-4">
      1 of 5
    </div>
    <div class="col-4">
      2 of 5
    </div>
    <div class="col-4">
      3 of 5
    </div>
    <div class="col-4">
      4 of 5
    </div>
    <div class="col-4">
      5 of 5
    </div>
  </div>  
</div>

Fiddle

感谢.col-4，您将始终连续获得三张卡片。在您的示例中：

<div class="card-group">
  <div class="row">
  <?php foreach ($item as $items) { ?>
    <div class="col-4">
      <div class="card">
        // Your card content goes here, use $item
      </div>
    </div>
  <?php } ?>
  </div>
</div>

更重要的是，您似乎用普通的 PHP 编写了一些东西。如果你想上市，你应该考虑一个已经有一些验证能力和函数助手的框架——甚至内置分页！我会为此选择Laravel。

编辑： 修正错误。谢谢@hakiko