PHP 및 DataTables를 사용하여 페이지가 매겨진 데이터 테이블 만들기

웹 개발에서 데이터 테이블은 자주 사용해야 하는 구성 요소입니다. 페이징은 대량의 데이터를 처리할 때 일반적인 요구 사항 중 하나입니다. 많은 양의 데이터가 포함된 페이징 데이터 테이블을 구현하려는 경우 많은 사람들이 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 형식으로 구성되어 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 노드를 생성하고 다음 코드를 추가하여 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!