Как использовать DataTable в PHP

Последнее обновление Июл 12, 2021

Содержание

Вы хотите интегрировать 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;

В таблице «пользователи» есть столбцы first_name, last_name и age. Добавьте фиктивные записи в эту таблицу. Пользователь может использовать библиотеку Faker для заполнения вашей таблицы фиктивными записями. Используя библиотеку 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);
}
?>

В приведенном выше коде я взял все строки из таблицы «users» и назначил их переменной 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"  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  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"  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  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