Mit der kontinuierlichen Weiterentwicklung von Webanwendungen und der Zunahme des Datenvolumens ist Paging zu einem notwendigen technischen Mittel geworden. Die Implementierung von Paging ist hauptsächlich in zwei Methoden unterteilt: serverseitig und clientseitig. In diesem Artikel konzentrieren wir uns darauf, wie PHP und JS Paging implementieren.
1. Serverseitiges Paging
1. Grundprinzip
Serverseitiges Paging basiert auf den Limit- und Offset-Einstellungen der SQL-Anweisung. Im Allgemeinen ermitteln wir zunächst die Gesamtzahl der Datensätze und berechnen dann die Gesamtzahl der Seiten. Basierend auf der aktuellen Seitennummer und der Anzahl der auf jeder Seite angezeigten Datensätze werden dann die Grenzwerte und Versatzwerte der aktuellen Seite berechnet und der Bereich der abzurufenden Datensätze in der SQL-Anweisung angegeben. Abschließend werden die erhaltenen Datensätze zur Anzeige an den Browser zurückgegeben.
2.php-Implementierung
php ist eine serverseitige Sprache, die MySQL-Abfragen zum Abrufen von Daten verwenden kann. Das Folgende ist ein Beispielcode-Snippet:
<?php
$host = 'localhost';
$username = 'root';
$password = 'password';
$database = 'test';
$conn = new mysqli($host, $username, $password, $database);
if($conn->connect_error){
die("Connection failed: " . $conn->connect_error);
}
$per_page = 10; // 每页显示10条记录
$page = isset($_GET['page']) ? $_GET['page'] : 1; // 获取当前页码，默认为第1页
$start = ($page - 1) * $per_page; // 计算当前页的起始记录号
$sql = "SELECT * FROM users LIMIT $start, $per_page";
$result = $conn->query($sql);
if($result->num_rows > 0){
while($row = $result->fetch_assoc()){
echo $row['id'] . " " . $row['name'] . "<br>";
}
}
$conn->close();
echo "<br>";
// 分页导航
echo "<div class='pagination'>";
echo "<a href='?page=1'>第一页</a>";
if($page > 1){
echo "<a href='?page=".($page-1)."'>上一页</a>";
}
if($page < $total_pages){
echo "<a href='?page=".($page+1)."'>下一页</a>";
}
echo "<a href='?page=".$total_pages."'>最后一页</a>";
echo "</div>";Der obige Code implementiert das Abrufen von Benutzerinformationen aus der MySQL-Datenbank, zeigt 10 Datensätze pro Seite an und unterstützt die Paging-Funktion. Unter diesen stellt $per_page die Anzahl der auf jeder Seite angezeigten Datensätze dar, $page stellt die aktuelle Seitenzahl dar, $start stellt die Startdatensatznummer der aktuellen Seite dar und $total_pages stellt die Gesamtzahl der Seiten dar.
2. Clientseitiges Paging
1. Grundprinzip
Clientseitiges Paging bedeutet, alle Datensätze gleichzeitig vom Server abzurufen und dann js für die Paging-Verarbeitung zu verwenden. Die spezifische Implementierungsmethode ist wie folgt:
1) Laden Sie alle Datenquellen in js;
2) Berechnen Sie die Gesamtzahl der Datensätze und die Gesamtseitenzahl;
3) Berechnen Sie den aktuellen Seitenbedarf basierend auf der aktuellen Seitenzahl und dem Anzahl der auf jeder Seite angezeigten Datensätze.
4) Rendern Sie die Daten und zeigen Sie sie auf der Seite an
5) Wechseln Sie die Seite, indem Sie auf die Seitenzahl klicken.
2.js-Implementierung
js-Paging-Implementierung basiert hauptsächlich auf jQuery- und Bootstrap-Frameworks. Das Folgende ist ein Beispielcode für Paging basierend auf Bootstrap:
<!DOCTYPE html>
<html>
<head>
<title>客户端分页示例</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>客户端分页示例</h3>
<table class="table table-bordered table-hover" id="tblData">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
</thead>
<tbody id="tblBody">
</tbody>
</table>
<nav>
<ul class="pagination" id="pagination">
</ul>
</nav>
</div>
<script>
$(function(){
// 模拟数据源
var data = [
{id:1, name:"张三", age:20, address:"北京"},
{id:2, name:"李四", age:22, address:"上海"},
{id:3, name:"王五", age:25, address:"广州"},
{id:4, name:"赵六", age:28, address:"深圳"},
{id:5, name:"周七", age:30, address:"杭州"},
{id:6, name:"吴八", age:35, address:"南京"},
{id:7, name:"钱九", age:40, address:"西安"},
{id:8, name:"孙十", age:45, address:"重庆"},
{id:9, name:"郑十一", age:50, address:"成都"},
{id:10, name:"冯十二", age:55, address:"武汉"}
];
var per_page = 5; // 每页显示5条记录
var total = data.length; // 记录总数
var total_pages = Math.ceil(total / per_page); // 计算总页数
// 初始化页码
for(var i = 1; i <= total_pages; i++){
var li = "<li><a href='#' onclick='changePage(" + i + ")'>" + i + "</a></li>";
$("#pagination").append(li);
}
// 默认显示第一页
showData(1);
// 根据页码显示数据
function showData(page){
var start = (page - 1) * per_page;
var end = start + per_page;
var html = "";
for(var i = start; i < end; i++){
var item = data[i];
if(item){
html += "<tr><td>" + item.id + "</td><td>" + item.name + "</td><td>" + item.age + "</td><td>" + item.address + "</td></tr>";
}
}
$("#tblBody").html(html);
}
// 切换页码
window.changePage = function(page){
showData(page);
$("#pagination li").removeClass("active");
$("#pagination li:nth-child(" + (page+1) + ")").addClass("active");
}
});
</script>
</body>
</html>Der obige Code demonstriert die Verwendung des Bootstrap-Frameworks zur Implementierung von clientseitigem Paging und verwendet simulierte Datenquellen für die Anzeige.
Fazit
Sowohl serverseitiges Paging als auch clientseitiges Paging haben ihre eigenen Vor- und Nachteile. Bei kleinen Datensätzen kann clientseitiges Paging verwendet werden, um die Belastung des Servers zu reduzieren. Für große Datensätze ist serverseitiges Paging besser geeignet. Daher ist es notwendig, die geeignete Paging-Methode entsprechend der tatsächlichen Situation auszuwählen.
Das obige ist der detaillierte Inhalt vonSo implementieren Sie Paging in PHP und JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
