php和js如何實作分頁
- PHPz原創
- 2023-05-06 19:40:08941瀏覽
隨著web應用程式的不斷演變和資料量的增加，分頁成為了一種必備的技術手段。分頁的實作主要分為伺服器端和客戶端兩種方式。在本文中，我們將著重介紹php和js如何實作分頁。
一、伺服器端分頁
1.基本原理
伺服器端分頁依賴SQL語句的limit和offset設定。一般情況下，我們首先要取得總記錄數，然後再計算總頁數。然後，根據目前頁碼和每頁顯示記錄數，計算出目前頁的limit和offset值，從而在SQL語句中指定需要取得的記錄範圍。最後，將取得的記錄傳回給瀏覽器進行展示。
2.php實作
php作為伺服器端語言，可以使用mysql查詢取得資料。下面是一個範例程式碼片段：
<?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>";
以上程式碼實現了從mysql資料庫中獲取用戶信息，每頁顯示10條記錄，支援分頁功能。其中，$per_page表示每頁顯示的記錄數，$page表示目前頁碼，$start表示目前頁的起始記錄號，$total_pages表示總頁數。
二、客戶端分頁
1.基本原理
客戶端分頁是指將所有記錄一次從伺服器取得到瀏覽器端，然後使用js進行分頁處理。具體實作方式如下：
1）將所有資料來源載入到js中；
2）計算總記錄數和總頁數；
3）根據目前頁碼和每頁顯示記錄數，計算出當前頁需要顯示的資料範圍；
4）渲染資料並顯示在頁面上；
5）透過點擊頁碼切換分頁。
2.js實作
js實作分頁主要是基於jQuery和Bootstrap框架。以下是一個基於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>
以上程式碼示範了使用Bootstrap框架實作客戶端分頁，並使用模擬資料來源進行展示。
結論
伺服器端分頁和客戶端分頁都具有各自的優點和缺點。對於小規模資料集，可以使用客戶端分頁，可以減輕伺服器負擔。而對於大規模資料集，伺服器端分頁較為適合。因此，需要根據實際情況選擇適當的分頁方式。
以上是php和js如何實作分頁的詳細內容。更多資訊請關注PHP中文網其他相關文章！