如何为PHP图片网格视图添加分页，实现每页显示3个产品？

Got it, let's get your pagination set up to show 3 products per page. Here's a step-by-step fix with modified code and explanations:

Key Changes We'll Make #

• Add pagination logic to slice your product list for each page
• Fix the grid HTML structure to avoid duplicate containers
• Add clean pagination navigation links
• Tweak styling for better grid consistency

Full Modified Code #

<!DOCTYPE html> 
<html> 
<head> 
    <title>Images Grid View</title> 
    <style type="text/css"> 
        #thumb { 
            clear : both; 
            width : 100%; 
            margin-left : 0; 
        } 
        #thumb ul { 
            width : 100%; 
            list-style: none;
            padding: 0;
            margin: 0;
        } 
        #thumb ul li { 
            display : inline-block; 
            font-family : arial; 
            padding-right : 5px; 
            width: 210px; 
            height : 280px; 
            vertical-align: top;
            margin-bottom: 10px;
        } 
        #thumb ul li img { 
            width : 200px; 
            height : 200px; 
            border : #ccc solid 1px; 
            padding : 2px; 
        }
        .pagination {
            margin-top: 20px;
            clear: both;
        }
        .pagination a {
            padding: 8px 12px;
            margin: 0 4px;
            border: 1px solid #ccc;
            text-decoration: none;
            color: #333;
            border-radius: 4px;
        }
        .pagination a.active {
            background-color: #f0f0f0;
            font-weight: bold;
            cursor: default;
        }
    </style> 
</head> 
<body>
    <?php 
    $rootPath = '/var/www/html/'; 
    require_once $rootPath.'app/bootstrap.php'; 
    $bootstrap = \Magento\Framework\App\Bootstrap::create(BP, $_SERVER); 
    $objManager = $bootstrap->getObjectManager(); 
    $state = $objManager->get('\Magento\Framework\App\State'); 
    $state->setAreaCode('frontend'); 
    $resource = $objManager->get('\Magento\Framework\App\ResourceConnection'); 
    $connection = $resource->getConnection('core_write'); 

    // Pagination configuration
    $productsPerPage = 3;
    $currentPage = isset($_GET['page']) ? (int)$_GET['page'] : 1;
    $currentPage = max(1, $currentPage); // Ensure we don't go below page 1

    // Your product entity IDs
    $entity_ids = array(10,100,1000,1001,116962,112694,116049,116960);
    $totalProducts = count($entity_ids);
    $totalPages = ceil($totalProducts / $productsPerPage);

    // Get only the product IDs for the current page
    $startIndex = ($currentPage - 1) * $productsPerPage;
    $currentPageProducts = array_slice($entity_ids, $startIndex, $productsPerPage);

    // Render the image grid
    if (!empty($currentPageProducts)) {
        echo '<div id="thumb"><ul>';
        foreach ($currentPageProducts as $entity_id) { 
            $media_results = $connection->query("SELECT value_id from catalog_product_entity_media_gallery_value where entity_id ='" . $entity_id . "'")->fetchAll(); 
            if(!empty($media_results)){ 
                foreach($media_results as $valueids){ 
                    $value_id = $valueids['value_id']; 
                    $oldimg = $connection->fetchOne("select value from catalog_product_entity_media_gallery where value_id = '" . $value_id . "' limit 1"); 
                    echo '<li>';
                    echo '<p>' . $entity_id .'</p>';
                    echo '<img src="https://testwebsite.com/pub/media/catalog/product/' . $oldimg . '" alt="Product Image" />';
                    echo '</li>'; 
                } 
            } 
        }
        echo '</ul></div>';
    } else {
        echo '<p>No products available for this page.</p>';
    }

    // Render pagination navigation
    if ($totalPages > 1) {
        echo '<div class="pagination">';
        // Previous page link
        if ($currentPage > 1) {
            echo '<a href="?page=' . ($currentPage - 1) . '">&laquo; Previous</a>';
        }
        // Page number links
        for ($i = 1; $i <= $totalPages; $i++) {
            $activeClass = ($i == $currentPage) ? 'class="active"' : '';
            echo '<a href="?page=' . $i . '" ' . $activeClass . '>' . $i . '</a>';
        }
        // Next page link
        if ($currentPage < $totalPages) {
            echo '<a href="?page=' . ($currentPage + 1) . '">Next &raquo;</a>';
        }
        echo '</div>';
    }
    ?>
</body> 
</html>

What We Did #

1. Pagination Logic: We use $_GET['page'] to track the current page, calculate which products to show with array_slice, and compute total pages using ceil() to handle partial pages.
2. Grid Structure Fix: Moved the main grid container (<div id="thumb">) outside the product loop so you don't get duplicate containers breaking your layout.
3. Styling Tweaks: Switched list items to inline-block for more reliable grid alignment, added margin to prevent overlapping, and styled pagination links for better usability.
4. Error Handling: Added a fallback message if a page has no products, and ensured the page number can't be less than 1.

内容的提问来源于stack exchange，提问作者Rahul