如何在 php、bootstrap、css 中将分页添加到列表/网格视图?

我正在开发一个搜索页面，该页面具有列表和网格视图选项。现在我想添加分页。不确定如何将其添加到此代码中。

此页面中还有一个错误，即 - 当我刷新页面时，我可以看到两个视图，一个后跟另一个。它仅在我单击特定按钮(列表或网格(时有效。

$searchData = Schema::searchVideo($searchValue);
<div class="container">
<div class="card border-light mb-3 text-center">
<div class="row">
<?php
if (empty($searchData)) {
echo <<<HTML
<div class="alert alert-danger col-md-12 col-md-offset-4" role="alert" align="center">
No videos matched the search
</div>
HTML;
} else {
<div id="container">
<div class="well well-sm"> 
<div class="btn-group">
<button id="list-view" class="list"><i class="fa fa-bars"></i></button>
<button id="grid-view" class="grid"><i class="fa fa-th-large"></i></button>
</div>   
</div> 

<div class="grid" id="grid">    
<div class="card-deck">  
<?php   
for ($i = 0; $i < count($searchData); $i++) {
$year = Schema::getyear($searchData[$i]->getyearId())->getyear();
$src = (file_exists('video/' . $year . '/' . $searchData[$i]->getUserId() . '/' . $searchData[$i]->getFileName() . '_small.jpg')) ? 'video/' . $year . '/' . $searchData[$i]->getUserId() . '/' . $searchData[$i]->getFileName() . '_small.jpg' : 'images/MediaPortal-700-400a.jpg';
echo <<<HTML
<div class="item col-lg-6 col-md-6 mb-4" > 
<div class = "thumbnail">
<div class="card h-100">
<a href="video.php?video={$searchData[$i]->getVideoId()}"><img class="card-img-top" src={$src} alt=""></a>
<div class="card-body">
<h4 class="card-title">{$searchData[$i]->getTitle()} </h4>
</div>
</div>
</div>
</div> 
</div>      
</div>
<div class="list" id="list">
<div class="table-responsive" style="width:1000px">
<table class="table table-striped">  
<?php   
for ($i = 0; $i < count($searchData); $i++) {
$year = Schema::getyear($searchData[$i]->getyearId())->getyear();
$src = (file_exists('video/' . $year . '/' . $searchData[$i]->getUserId() . '/' . $searchData[$i]->getFileName() . '_small.jpg')) ? 'video/' . $year . '/' . $searchData[$i]->getUserId() . '/' . $searchData[$i]->getFileName() . '_small.jpg' : 'images/MediaPortal-700-400a.jpg';
echo <<<HTML
<tr>
<td>    
<a href="video.php?video={$searchData[$i]->getVideoId()}">{$searchData[$i]->getTitle()}{$src}</a>        
</td>  
</tr>                            
HTML;
}
?>
</table>
<!--</ul>-->
</div>         
</div>
<?php   }
?>
</div>
</div>                         
</div>

架构.php

public function searchVideoCourse(string $courseNumber): ?array {
$objectArray = [];
if (isset($_GET['pageno'])) {
$pageno = $_GET['pageno'];
} else {
$pageno = 1;
}
$no_of_records_per_page = 10;
$offset = ($pageno-1) * $no_of_records_per_page;
$conn = DatabaseConnection::getConnection();
$total_pages_sql = "SELECT COUNT(*) FROM Video";
$result1 = $conn->prepare($total_pages_sql);
$total_rows = $result1->fetch(PDO::FETCH_ASSOC);
$total_pages = ceil($total_rows / $no_of_records_per_page);
$stmt = $conn->prepare("SELECT academicYearId, Course.courseId, date, description, fileName, isUploaded, title, userId, Video.videoId FROM Video LEFT JOIN Course ON Video.courseId = Course.courseId WHERE courseNumber = :courseNumber AND isUploaded = 1 ORDER BY Video.title ASC LIMIT $offset, $no_of_records_per_page");
if ($stmt->execute(array(':courseNumber' => $courseNumber))) {
while ($result = $stmt->fetch(PDO::FETCH_ASSOC)) {
array_push($objectArray, VideoFactory::createVideo($result['academicYearId'], $result['courseId'], $result['date'], $result['description'], $result['fileName'], $result['isUploaded'], $result['title'], $result['userId'], $result['videoId']));
}
return $objectArray;
} else {
return null;
}
}
<ul class="pagination">
<li><a href="?pageno=1">First</a></li>
<li class="<?php if($pageno <= 1){ echo 'disabled'; } ?>">
<a href="<?php if($pageno <= 1){ echo '#'; } else { echo "?pageno=".($pageno - 1); } ?>">Prev</a>
</li>
<li 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><a href="?pageno=<?php echo $total_pages; ?>">Last</a></li>
</ul>

.js

$(document).ready(function(){
$("#list-view").click(function() {
$("#grid").hide();
$("#list").show();
});
$("#grid-view").click(function() {
$("#grid").show();
$("#list").hide();
});
});

把它放在你的document.ready块中：

$("#grid").hide();
$("#list").show();

如上所述，要进行分页，我将首先将数据集加载到数组中，然后调用 javascript 函数将数组的一部分(例如前 10 行(加载到 DOM 中。寻呼机中的每个按钮本质上都会说"从记录 n 开始，显示接下来的 x 行"。

你应该在这里使用 AJAX 分页，加载两个视图(List & Grid(不是一个好的做法，让我向你展示逐点流程

最初提供视图按钮(List & Grid(并创建一个默认视图
把"下一个按钮"倒下
当用户单击"下一步按钮"时，找到他/她选择的视图(列表和网格(并发出AJAX请求以及选定的视图值
根据视图值，您可以返回其相关的 HTML 代码。
最后将响应追加到最终容器中

这里有一个关于 Ajax 分页的好教程

相关内容

最新更新

热门标签：