如何显示查询的部分结果，然后按钮显示下一组

Question

我建立了一个图片库。目前，我遍历所有选定的条件，然后填充与该类别关联的所有图像。一切正常。但是，一旦上传了更多图像，图像就会完全太多。

因此，考虑到这一点，我希望JS向他们展示15个图像增量。显示 15 张图像时，如果超过 15 张，则其下方会有一个按钮，上面写着"显示更多"。单击该按钮时，将显示接下来的 15 个图像(或者如果没有更多的 15 个图像，则显示剩下的任何图像(。我想是一种增量分页形式，没有额外的页面。

我该怎么做？

.PHP：

$category = $_POST['category'];
$projects_sql = "
        SELECT *
        FROM project_gallery
        WHERE category = '".$category."'
        ORDER BY date_added DESC
    ";
    if ($projects_stmt = $con->prepare($projects_sql)) {
        $projects_stmt->execute();
        $project_rows = $projects_stmt->fetchAll(PDO::FETCH_ASSOC);
        $proj_arr = array();
        foreach ($project_rows as $project_row) {
            $project_img = $project_row['p_img'];
            $project_img = substr($project_img, 2);
            $project_alt = $project_row['p_alt'];
            $project_display_img = '<img src="/php'.$project_img.'" alt="'. $project_alt .'" class="projectDisplayImg">';
            $project_title = $project_row['p_name'];
            $html = '';
            $html .= '<div class="projectCont" data-current="'.$category.'">';
            $html .= $project_display_img;
            $html .= '<div class="overlay"><div class="overlayInner"><img src="/Projects/expand.png" alt="Expand MB Kit Project" class="total-center" id="overlayImg"></div></div>';
            $html .= '</div>';
            $data = array('id' => $project_row['id'], 'date' => $project_row['date_added'], 'html' => $html);
            $proj_arr[] = $data;
        }
    }
    echo json_encode($proj_arr);

.JS：

$.ajax({
        url: '/php/projectLoad.php',
        type: 'POST',
        data: {
            'category': category
        },
        success: function (data) {
          //console.log(data);
            if (data == null) {
                alert("Unable to retrieve projects!");
                alert(data);
            } else {
                var displayProjects = JSON.parse(data);
                $wrapper.empty();
                $(displayProjects).each(function() {
                    $wrapper.append(this.html);
                    //console.log(this.html);
                });
                $wrapper.append(startBuilding);
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            alert(textStatus + " | " + errorThrown);
            alert('There are currently no project images for this selection');
        }
});

.HTML：

<div id="projectGallery"></div>

查询更新：

try {
    $con = getConfig('pdo');
    $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    if ($projects_stmt = $con->prepare(SELECT * FROM project_gallery WHERE category = :category ORDER BY date_added DESC)) {
        $projects_stmt -> bindParam(':category', $category);
        $projects_stmt->execute();
        $project_rows = $projects_stmt->fetchAll(PDO::FETCH_ASSOC);
        $proj_arr = array();

Answer 1

在查询文档(行(中有一个称为偏移量的概念。您最初可以为实例加载一些文档，例如 30(使用 limit 或 top 子句(。将结果存储在数组中并显示它。单击下一个按钮时，将偏移量添加到最后一个偏移量，该偏移量将变为 30 (0+30(，因此前 30 行将被忽略。第三次点击按钮。将 30 添加到偏移量 (0+30+30(，因此前 60 行将被忽略。

下面是示例查询。

SELECT
    product_name,
    list_price
FROM
    production.products
ORDER BY
    list_price,
    product_name 
OFFSET 10 ROWS 
FETCH NEXT 10 ROWS ONLY;