【发布时间】：2019-03-21 05:52:21
【问题描述】：
我正在处理具有列表和网格视图选项的搜索页面。现在我想给它添加分页。不知道如何将其添加到此代码中。
此页面中还有一个错误，即 - 当我刷新页面时，我可以看到两个视图，一个接着另一个。 它仅在我单击特定按钮（列表或网格）时才有效。
$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>
schema.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();
});
});
【问题讨论】：
-
据我所知，您同时看到了这两个视图，因为您没有隐藏其中一个。也许您应该有一个默认视图（网格或列表）并在页面加载时隐藏另一个。至于你问题的分页部分，我通常通过将 php 数组加载到 javascript 数组中，然后调用 javascript 函数在 DOM 中显示数组的子集来做到这一点。
-
嘿，我用js隐藏了。编辑它。请检查
-
但您不想在页面加载时隐藏其中一个吗？选择一个隐藏和一个显示。
-
是的，我该怎么做？
-
就在您的文档下方。准备好放入 $("#grid").hide(); $("#list").show();
标签： php html css pagination