我正在开发一个搜索页面，该页面可以选择 ListView 和 GridView 。现在我想给它添加分页。不确定如何将它添加到此代码中。
此页面中还有一个错误，即 - 当我刷新页面时，我可以看到两个 View ，一个接着另一个。 它仅在我单击特定按钮(列表或网格)时有效。
$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 block 中:
$("#grid").hide();
$("#list").show();
如上所述，为了进行分页，我首先将您的数据集加载到一个数组中，然后调用一个 javascript 函数将数组的一部分(例如，前 10 行)加载到 DOM 中。寻呼机中的每个按钮本质上都会说“从记录 n 开始，显示接下来的 x 行”。
关于php - 如何在 php、bootstrap、css 中向列表/ GridView 添加分页？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52839830/