PHP と DataTables を使用してページ分割されたデータ テーブルを作成する

Web 開発では、データ テーブルは頻繁に使用する必要があるコンポーネントです。ページングは​​、大量のデータを処理する場合の一般的な要件の 1 つです。大量のデータを含むページング データ テーブルを実装したい場合、多くの人は Vue、React、Angular などのフロントエンド フレームワークの使用を選択するかもしれません。ただし、ページ分割されたデータ テーブルは、バックエンド言語 PHP とフロントエンド プラグイン DataTables を使用して簡単に作成することもでき、より柔軟でカスタマイズ可能です。 PHP と DataTables を使用してページ分割されたデータ テーブルを作成する方法を見てみましょう。

まず、データをレンダリングするためのデータ ソースが必要です。 PHP は非常に強力なサーバーサイド言語であるため、データベースに接続するかファイルを読み取ることでデータを取得できます。この記事では、PHP を使用して MySQL データベースに接続してデータを取得し、それを DataTables 用の JSON 形式で出力してデータ テーブルをレンダリングします。デモンストレーションの便宜上、偽のデータ テーブルを使用します。次のコードを使用して、「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 形式に構造化され、DataTable に出力されます。

次に、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 ノードを作成し、次のコードを追加して DataTable を初期化します。

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

ここでは、DataTables の処理パラメーターを true に設定します。これは、読み込みプロンプトをオンにすることを意味します。また、serverSide パラメータも true に設定されます。これは、サーバー側モードが有効であることを意味します。最後に、ajax パラメータが「データ ソース インターフェイス URL」に設定され、先ほど作成した PHP ファイルを指します。このようにして、ユーザーがデータ テーブルを参照すると、DataTables はページング クエリでサーバーからデータを取得し、テーブルに表示します。

これで、ページング関数を含むデータテーブルが正常に作成されました。上記は、PHP と DataTables を使用してページング データ テーブルを作成する基本的な考え方とコードのデモです。読者は、特定のニーズに応じて調整および改善できます。

以上がPHP と DataTables を使用してページ分割されたデータ テーブルを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。