使用PHP和DataTables建立分頁資料表格-php教程-PHP中文網

使用PHP和DataTables建立分頁資料表格

WBOY

發布： 2023-05-11 18:26:02

原創

1698 人瀏覽過

在Web開發中，資料表格是我們經常需要用到的元件。而分頁，則是處理大量資料時常見的需求之一。如果要實作一個大量資料的分頁資料表格，很多人可能會選擇使用前端框架例如Vue、React或Angular。然而，使用後端語言PHP和前端外掛程式DataTables也可以輕鬆建立分頁資料表格，並且更加靈活和可自訂性更高。下面我們就來看看如何利用PHP和DataTables來建立分頁資料表格。

首先，我們需要一個用於呈現資料的資料來源。由於PHP是一種非常強大的伺服器端語言，可以透過連接資料庫或讀取檔案等方式來取得資料。在本文中，我們將用PHP連接MySQL資料庫來取得數據，並且將其以JSON格式輸出，供DataTables渲染資料表。為了方便演示，我們使用一個假數據表。可以透過以下程式碼建立一個名為"users"的資料表。

CREATE TABLE users (
    id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(30) NOT NULL,
    age INT(3) NOT NULL,
    email VARCHAR(50),
    registration_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

登入後複製

接下來，我們將在PHP檔案中編寫資料來源介面。程式碼如下：

<?php
header('Content-Type: application/json');

$servername = "localhost"; // 数据库服务器名
$username = "username"; // 数据库用户名
$password = "password"; // 数据库密码
$dbname = "myDB"; // 数据库名

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
} 

// 查询数据总数
$sql = "SELECT COUNT(*) FROM users";
$result = $conn->query($sql);
$row = $result->fetch_row();
$total_count = $row[0];

// 分页参数
$limit = $_GET["length"];
$offset = $_GET["start"];

// 查询当前页数据
$sql = "SELECT id, name, age, email, registration_date FROM users LIMIT $offset, $limit";
$result = $conn->query($sql);

// 构造JSON数据
$data = [];
while($row = $result->fetch_assoc()) {
    $data[] = $row;
}
echo json_encode(array(
    "draw" => $_GET["draw"], 
    "recordsTotal" => $total_count, 
    "recordsFiltered" => $total_count, 
    "data" => $data
));

$conn->close();
?>

登入後複製

上述程式碼中，我們先連接資料庫，並查詢資料總數。接著，從GET參數中取得分頁參數，並根據分頁參數查詢目前頁資料。最後，將資料建構成JSON格式，並輸出給DataTables。

接下來，我們需要引入DataTables插件，並對其進行配置和初始化。可以透過如下程式碼引入DataTables和jQuery。

<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- 引入 DataTables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

登入後複製

接著，在HTML中建立一個表格DOM節點，並加入以下程式碼進行DataTables初始化。

// 初始化 DataTables
$(document).ready(function() {
    $('#example').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": "data.php"
    });
});

登入後複製

在這裡，我們設定了DataTables的processing參數為true，表示開啟載入提示。 serverSide參數也設定為true，表示開啟伺服器端模式。最後，ajax參數設定為"資料來源介面URL"，指向我們剛才寫的PHP檔。這樣，當使用者瀏覽資料表格的時候，DataTables將會以分頁查詢的方式從伺服器上取得數據，並呈現在表格中。

至此，一個包含分頁功能的資料表格就被成功地創建出來了。以上便是使用PHP和DataTables建立分頁資料表格的基本想法和程式碼示範。讀者可以根據自己的具體需求來進行調整和改進。

以上是使用PHP和DataTables建立分頁資料表格的詳細內容。更多資訊請關注PHP中文網其他相關文章！