Як використовувати DataTable у PHP

Останнє оновлення Лют 12, 2025

Зміст

Ви хочете інтегрувати DataTable у свою програму? DataTable додає розширені засоби взаємодії до ваших таблиць HTML. Плюс це з відкритим кодом, тому кожен може користуватися ним безкоштовно. Це корисно, коли у вашій таблиці є сотні записів. Використовуючи DataTable, ви отримаєте їх вбудовані функції, такі як сортування, пошук, пагінація тощо. У цій статті я покажу вам, як використовувати DataTable у PHP.

DataTables – популярний вибір для включення табличних записів у програму. Завдяки простоті та простоті встановлення розробники воліли використовувати його.

Для нашого підручника я буду створювати таблицю в базі даних і відображатиму її записи в DataTable. Остаточний результат буде виглядати так, як показано на знімку екрана:

Починаємо

Для того, щоб розпочати роботу, перейдіть до свого phpMyAdmin і створіть таблицю, використовуючи запит нижче:


CREATE TABLE `users` ( `id` int(11) NOT NULL AUTO_INCREMENT,
 `first_name` varchar(255) NOT NULL,
 `last_name` varchar(255) NOT NULL,
 `age` int(11) NOT NULL,
 PRIMARY KEY (`id`)) ENGINE=InnoDB DEFAULT CHARSET=latin1;

У таблиці "користувачі" є стовпці ім’я, прізвище та вік. Додайте фіктивні записи в цю таблицю. Користувач може використовувати бібліотеку Faker для засівання вашої таблиці фіктивними записами. За допомогою фальшивої бібліотеки можна додати тисячі підроблених записів до бази даних протягом декількох хвилин.

Далі створіть config.phpфайл і напишіть код для підключення до бази даних.

config.php


<?php
$conn = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);
 
if ($conn->connect_errno) {
    echo "Error: ". $conn->connect_error;
}

Обов’язково замініть заповнювачі фактичними значеннями.

Як використовувати DataTable у PHP

Для інтеграції DataTable те, що я збираюся зробити, – це дістати записи з бази даних, прокрутити їх і відобразити в таблиці. А потім застосуйте DataTable до таблиці HTML.

Створіть index.phpфайл і додайте в нього код нижче.


<?php
require_once('config.php');
 
$sql = "SELECT id, first_name, last_name, age FROM users";
$result = $conn->query($sql);
$arr_users = [];
if ($result->num_rows > 0) {
    $arr_users = $result->fetch_all(MYSQLI_ASSOC);
}
?>

У наведеному вище коді я витягнув усі рядки з таблиці користувачі ” і призначив їх змінній PHP $arr_users. Тепер я прокручую цю змінну і створюю рядок таблиці по одному.


<table id="userTable">
    <thead>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Age</th>
    </thead>
    <tbody>
        <?php if(!empty($arr_users)) { ?>
            <?php foreach($arr_users as $user) { ?>
                <tr>
                    <td><?php echo $user['first_name']; ?></td>
                    <td><?php echo $user['last_name']; ?></td>
                    <td><?php echo $user['age']; ?></td>
                </tr>
            <?php } ?>
        <?php } ?>
    </tbody>
</table>

Тут я надав таблиці ідентифікатор userTable. Наступне, що мені потрібно зробити, це включити необхідні файли DataTable в HTML.


<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

Нарешті, викличте метод DataTable() на вказаному ідентифікаторі таблиці.


<script>
$(document).ready(function() {
    $('#userTable').DataTable();
});
</script>

Наш остаточний код такий;


<?php
require_once('config.php');
 
$sql = "SELECT id, first_name, last_name, age FROM users";
$result = $conn->query($sql);
$arr_users = [];
if ($result->num_rows > 0) {
    $arr_users = $result->fetch_all(MYSQLI_ASSOC);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Datatable</title>
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"/>
</head>
<body>
    <table id="userTable">
        <thead>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
        </thead>
        <tbody>
            <?php if(!empty($arr_users)) { ?>
                <?php foreach($arr_users as $user) { ?>
                    <tr>
                        <td><?php echo $user['first_name']; ?></td>
                        <td><?php echo $user['last_name']; ?></td>
                        <td><?php echo $user['age']; ?></td>
                    </tr>
                <?php } ?>
            <?php } ?>
        </tbody>
    </table>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
    <script>
    $(document).ready(function() {
        $('#userTable').DataTable();
    });
    </script>
</body>
</html>

Сподіваюся, ви зможете навчитися використовувати DataTable у PHP. Будь ласка, поділіться своїми думками в розділі коментарів нижче.

Пов’язані статті

Джерело запису: artisansweb.net