Cipta jadual data bernombor menggunakan PHP dan Jadual Data

Dalam pembangunan web, jadual data ialah komponen yang sering kita perlu gunakan. Paging adalah salah satu keperluan biasa apabila memproses sejumlah besar data. Jika anda ingin melaksanakan jadual data paging dengan jumlah data yang banyak, ramai orang boleh memilih untuk menggunakan rangka kerja hadapan seperti Vue, React atau Angular. Walau bagaimanapun, jadual data bernombor juga boleh dibuat dengan mudah menggunakan bahasa hujung belakang PHP dan DataTables pemalam bahagian hadapan, serta lebih fleksibel dan boleh disesuaikan. Mari kita lihat cara menggunakan PHP dan Jadual Data untuk membuat jadual data halaman.

Pertama, kami memerlukan sumber data untuk memaparkan data. Memandangkan PHP ialah bahasa sebelah pelayan yang sangat berkuasa, data boleh diperoleh dengan menyambung ke pangkalan data atau membaca fail. Dalam artikel ini, kami akan menggunakan PHP untuk menyambung ke pangkalan data MySQL untuk mendapatkan data, dan mengeluarkannya dalam format JSON untuk DataTables untuk memaparkan jadual data. Untuk kemudahan demonstrasi, kami menggunakan jadual data palsu. Anda boleh membuat jadual data bernama "pengguna" melalui kod berikut.

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

Seterusnya, kami akan menulis antara muka sumber data dalam fail PHP. Kodnya adalah seperti berikut:

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

Dalam kod di atas, kami mula-mula menyambung ke pangkalan data dan menanyakan jumlah data. Seterusnya, dapatkan parameter paging daripada parameter GET dan tanya data halaman semasa berdasarkan parameter paging. Akhir sekali, data distrukturkan ke dalam format JSON dan output ke DataTables.

Seterusnya, kami perlu memperkenalkan pemalam DataTables, mengkonfigurasi dan memulakannya. DataTables dan jQuery boleh diperkenalkan melalui kod berikut.

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

Seterusnya, buat nod DOM jadual dalam HTML dan tambah kod berikut untuk memulakan DataTables.

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

Di sini, kami menetapkan parameter pemprosesan DataTable kepada benar, yang bermaksud menghidupkan gesaan pemuatan. Parameter serverSide juga ditetapkan kepada benar, menunjukkan bahawa mod sisi pelayan didayakan. Akhir sekali, parameter ajax ditetapkan kepada "URL antara muka sumber data", menunjuk ke fail PHP yang baru kami tulis. Dengan cara ini, apabila pengguna menyemak imbas jadual data, DataTables akan memperoleh data daripada pelayan dalam bentuk pertanyaan paging dan membentangkannya dalam jadual.

Pada ketika ini, jadual data yang mengandungi fungsi paging telah berjaya dibuat. Di atas ialah idea asas dan demonstrasi kod menggunakan PHP dan DataTables untuk membuat jadual data paging. Pembaca boleh menyesuaikan dan memperbaikinya mengikut keperluan khusus mereka.

Atas ialah kandungan terperinci Cipta jadual data bernombor menggunakan PHP dan Jadual Data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!