时间戳

首页 > 解决方案 > 如何显示查询的部分结果，然后按钮显示下一组

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

问题描述

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

因此，考虑到这一点，我希望 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();

标签： javascriptphpjquery

解决方案

在查询文档（行）中有一个叫做偏移量的概念。您最初可以为一个实例加载一些文档，比如说 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;

推荐阅读