Question

我想在一个页面中以网格视图显示所有产品图像，但因为有数千种产品，我想为更好的UI添加分页。

以下是我在网格视图中显示图片的代码 -

<!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%;
}
#thumb ul li {
display : inline;
font-family : arial;
float : left;
padding-right : 5px;
width: 210px; 
height : 280px;
}
#thumb ul li img {
float : left;
width : 200px;
height : 200px;
border : #ccc solid 1px;
padding : 2px;
}
    </style>
</head>
<body>
</body>
</html>


<?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');

$entity_ids = array(10,100,1000,1001,116962,112694,116049,116960);
foreach ($entity_ids as $entity_id) {
      $oldImage = array();
      $media_results = $connection->query("SELECT value_id from catalog_product_entity_media_gallery_value where entity_id ='".$entity_id."'")->fetchAll();
      if(!empty($media_results)){
         echo '<div id="thumb"><ul>';
         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");
            $oldImage[] = $oldimg;

            echo '<li><p>' . $entity_id .'</p>';
            echo '<img src="https://testwebsite.com/pub/media/catalog/product/'.$oldimg.'" alt="Image" />';
            echo '</li>';
         }
         echo '</ul></div>';
      }
}

?>

图片在网格视图中正确显示，但我想添加分页以在每个页面上仅显示3个产品。

任何建议都将不胜感激。

Answer 1

经过这么多的耐心，我已经理解了添加分页和使用引导分页的每个标准..

以下是我的回答。希望它会帮助别人。

<!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%;
}
#thumb ul li {
display : inline;
font-family : arial;
float : left;
padding-right : 5px;
width: 210px; 
height : 280px;
}
#thumb ul li img {
float : left;
width : 200px;
height : 200px;
border : #ccc solid 1px;
padding : 2px;
}
</style>
</head>
<body>



<?php
$conn = mysqli_connect("localhost", "root", "test123#", "imagesdatabase") or die("unable to connect");
$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');

         $rec_limit = 6;
         $rec_count = 50; 
         if (isset($_GET['pageno'])) {
             $pageno = $_GET['pageno'];
         } else {
             $pageno = 1;
         }
         $no_of_records_per_page = 12;
         $offset = ($pageno-1) * $no_of_records_per_page; 

         $total_pages_sql = "SELECT count(e.entity_id) from catalog_product_entity_media_gallery g join catalog_product_entity_media_gallery_value v on (g.value_id = v.value_id) join catalog_product_entity e on (v.entity_id = e.entity_id) where e.attribute_set_id = 62";
         $result = mysqli_query($conn,$total_pages_sql);
         $total_rows = mysqli_fetch_array($result)[0];
         $total_pages = ceil($total_rows / $no_of_records_per_page);

         $entity_ids = mysqli_query($conn,"SELECT e.entity_id,g.value_id,g.value from catalog_product_entity_media_gallery g join catalog_product_entity_media_gallery_value v on (g.value_id = v.value_id) join catalog_product_entity e on (v.entity_id = e.entity_id) where e.attribute_set_id = 62 limit  $offset, $no_of_records_per_page");
         echo '<div id="thumb"><ul>';
         while ( $row=mysqli_fetch_array($entity_ids,MYSQLI_ASSOC)) {
            $entity_id = $row['entity_id'];
            $image = $row['value'];
            echo '<li><p>' . $entity_id .'</p>';

            echo '<img src="https://testwebsite.com/pub/media/catalog/product/'.$image.'" alt="Image" /></a>';
            echo '</li>';
         }
         echo '</ul></div>';

?>


<center>
<ul class="pagination" style="list-style-type:none; display:-webkit-inline-box !important; float: left; font-size: 24px;">
    <li style="background-color:gray;"><a href="?pageno=1">First</a></li>
    <li style="background-color:gray;" class="<?php if($pageno <= 1){ echo 'disabled'; } ?>">
        <a href="<?php if($pageno <= 1){ echo '#'; } else { echo "?pageno=".($pageno - 1); } ?>">Prev</a>
    </li>
    <li style="background-color:gray;" class="<?php if($pageno >= $total_pages){ echo 'disabled'; } ?>">
        <a href="<?php if($pageno >= $total_pages){ echo '#'; } else { echo "?pageno=".($pageno + 1); } ?>">Next</a>
    </li>
    <li style="background-color:gray;"><a href="?pageno=<?php echo $total_pages; ?>">Last</a></li>
</ul>
</center>

</body>
</html>

如何在php图像网格视图中添加分页？

1 个答案: