Créer des tables de données paginées à l'aide de PHP et DataTables

Dans le développement Web, les tableaux de données sont des composants que nous devons souvent utiliser. La pagination est l'une des exigences courantes lors du traitement de grandes quantités de données. Si vous souhaitez implémenter une table de données de pagination avec une grande quantité de données, de nombreuses personnes peuvent choisir d'utiliser un framework front-end tel que Vue, React ou Angular. Cependant, les tableaux de données paginés peuvent également être facilement créés à l'aide du langage back-end PHP et du plug-in frontal DataTables, et sont plus flexibles et personnalisables. Voyons comment utiliser PHP et DataTables pour créer des tables de données paginées.

Tout d'abord, nous avons besoin d'une source de données pour le rendu des données. PHP étant un langage côté serveur très puissant, les données peuvent être obtenues en se connectant à une base de données ou en lisant des fichiers. Dans cet article, nous utiliserons PHP pour nous connecter à la base de données MySQL afin d'obtenir des données et les afficherons au format JSON pour que DataTables restitue les tableaux de données. Pour faciliter la démonstration, nous utilisons une fausse table de données. Vous pouvez créer une table de données nommée « utilisateurs » via le code suivant.

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
);

Ensuite, nous écrirons l'interface de la source de données dans le fichier PHP. Le code est le suivant :

<?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();
?>

Dans le code ci-dessus, nous nous connectons d'abord à la base de données et interrogeons le nombre total de données. Ensuite, récupérez les paramètres de pagination à partir des paramètres GET et interrogez les données de la page actuelle en fonction des paramètres de pagination. Enfin, les données sont structurées au format JSON et sorties vers DataTables.

Ensuite, nous devons introduire le plug-in DataTables, le configurer et l'initialiser. DataTables et jQuery peuvent être introduits via le code suivant.

<!-- 引入 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>

Ensuite, créez un nœud DOM de table en HTML et ajoutez le code suivant pour initialiser DataTables.

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

Ici, nous définissons le paramètre de traitement de DataTables sur true, ce qui signifie activer l'invite de chargement. Le paramètre serverSide est également défini sur true, ce qui signifie que le mode côté serveur est activé. Enfin, le paramètre ajax est défini sur "URL de l'interface de la source de données", pointant vers le fichier PHP que nous venons d'écrire. De cette façon, lorsque l'utilisateur parcourt la table de données, DataTables obtiendra les données du serveur dans une requête de pagination et les présentera dans la table.

À ce stade, une table de données contenant la fonction de pagination a été créée avec succès. Ce qui précède est l'idée de base et la démonstration de code de l'utilisation de PHP et DataTables pour créer des tables de données de pagination. Les lecteurs peuvent l'ajuster et l'améliorer en fonction de leurs besoins spécifiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!