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



我想在一个页面中以网格视图显示所有产品图像,但由于有数千种产品,我想添加分页以获得更好的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 = MagentoFrameworkAppBootstrap::create(BP, $_SERVER);
$objManager = $bootstrap->getObjectManager();
$state = $objManager->get('MagentoFrameworkAppState');
$state->setAreaCode('frontend');
$resource = $objManager->get('MagentoFrameworkAppResourceConnection');
$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 个产品。

任何建议将不胜感激。

经过如此多的耐心,我已经了解了添加分页和使用引导分页的每个条件..

以下是我的回答。 希望它能帮助某人。

<!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 = MagentoFrameworkAppBootstrap::create(BP, $_SERVER);
$objManager = $bootstrap->getObjectManager();
$state = $objManager->get('MagentoFrameworkAppState');
$state->setAreaCode('frontend');
$resource = $objManager->get('MagentoFrameworkAppResourceConnection');
$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>

最新更新