WEB и WordPress новости, темы, плагины. Здесь мы делимся советами и лучшими решениями для сайтов.

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

197

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

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее