DataTables PHP и MySql

Для работы с большим списком вам понадобится плагин DataTables который позволяет сортировать, разбивать на страницы и выполнить поиск в списке. В этом уроке я расскажу как вывести список из базы данных в таблицу HTML с помощью плагина jQuery DataTable.

Оглавление:
  1. Создать таблицу в базе данных MySql
  2. Пояснение созданной таблицы
  3. Таблица DataTable HTML
  4. Пример DataTables

jQuery DataTables очень популярный проект с открытым исходным кодом, и предлагает нам много вариантов для веб-разработки с минимальными настройками. На самом деле есть много способов получить данные в DataTables. В этой статье рассматривается способ обработки данных на стороне сервера Server-side processing.

Создать таблицу в базе данных MySql

Если у вас нет готовой таблицы в базе данных для вывода данных в HTML, создайте её способом ниже. Для примера таблица будет содержать информацию о зарегистрированном пользователе.

  1. Заходим в базу данных MySql
  2. Открываем вкладку SQL
  3. Создаём таблицу в базе данных:
    • В поле вставляем запрос SQL
      CREATE TABLE `user_profiles` (
        `id` int(10) unsigned NOT NULL auto_increment,
        `first_name` varchar(255) NOT NULL default '',
        `last_name` varchar(255) NOT NULL default '',
        `email` varchar(255) NOT NULL default '',
        `password` varchar(40) NOT NULL default '',
        `user_phone` varchar(10) NOT NULL default '',
        `status` enum('active','passive') NOT NULL default 'active',
        `role` tinyint(4) unsigned NOT NULL default '1',
        `date_reg` datetime NOT NULL default '0000-00-00 00:00:00',
            PRIMARY KEY  (`id`)
         ) ENGINE=MyISAM  DEFAULT CHARSET=utf8;
    • Нажимаем кнопку OK
  4. Структура таблицы в MySQL должна выглядеть так:
Структура таблицы в базе данных MySQL
Вид таблицы user_profiles в базе данных MySQL
к меню ↑

Пояснение созданной таблицы

user_profiles
название таблицы в базе данных MySql.
id
столбец для присвоения уникального идентификатора зарегистрированному пользователю.
first_name
имя зарегистрированного пользователя.
last_name
фамилия зарегистрированного пользователя.
email
электронный адрес пользователя указанный при регистрации.
password
пароль пользователя указанный при регистрации. Пороли всегда нужно хешировать, как это сделать читайте статью «Хеширование паролей в PHP».
user_phone
телефон пользователя указанных при регистрации.
status
активный или пассивный статус пользователя.
role
роль пользователя в системе.
date_reg
дата регистрации пользователя.
CHARSET=utf8
кодировка базы данных.
к меню ↑

Таблица DataTable HTML

Создайте файл index.html и между тегами <head> и </head> подключите нужные библиотеки CSS и JavaScript.

<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>

Дальше между тегами <body> и </body> вставляем саму таблицу HTML.

<table class="display" id="user_profiles" width="100%" style="text-align: center;">            
  <thead>
    <th title="First Name">Имя</th>
    <th title="Last Name">Фамилия</th>
    <th title="Email">e-mail</th>
    <th title="User Phone">Телефон</th>
    <th title="Status">статус</th>
    <th title="Role">роль</th>
    <th title="Registration date">Дата</th>
  </thead>            
  <tbody>
    <tr>
      <td colspan="6" class="dataTables_empty">Загрузка данных о пользователях с сервера</td>
    </tr>
  </tbody>            
  <tfoot>
    <th title="First Name">Имя</th>
    <th title="Last Name">Фамилия</th>
    <th title="Email">e-mail</th>
    <th title="User Phone">Телефон</th>
    <th title="Status">статус</th>
    <th title="Role">роль</th>
    <th title="Registration date">Дата</th>
  </tfoot>        
</table>

Теперь скриптам нужно указать к какой таблице применить действия. Разробы JavaScript’ов этот код называют Инициализация.

<script>

    $(document).ready(function() {
    $('#user_profiles').dataTable( {
     "aProcessing": true,
     "aServerSide": true,
     "ajax": "server-response.php",
    } );
    } );

</script>

обратите внимание на селектор #user_profiles, он должен обязательно совпадать с id таблицей DataTable HTML.

Строка "ajax": "server-response.php" подключает файл PHP в котором выполняется подключение к базе дынных. Для этого создайте файл server-response.php в той же папке где лежит index.html.

Код для файла server-response.php можно скопировать на официальной странице плагина DataTables. Единственное что нужно сделать, это заполнить подключение к базе данных и изменить строки.

Строка 15

$aColumns = array( 'engine', 'browser', 'platform', 'version', 'grade' );

меняем на

$aColumns = array('first_name', 'last_name', 'email', 'user_phone', 'status', 'role', 'date_reg');

строку 21

$sTable = "ajax";

меняем на

$sTable = "user_profiles";

Значение переменной $sTable — это название созданной таблицы в базе данных MySql. В нашем случае таблица называется user_profiles (Профиль пользователя).

Что касается вывода из базы данных в одну колонку HTML две строки, в документации о плагине DataTables написано, что как бы это можно сделать массивом:

name[,]

Но реализовать таким способом у меня не получилось.

к меню ↑

Пример DataTables

Чтобы увидеть работу плагина в действии, заполните форму регистрации на этой странице (пожалуйста, не пишите всякую х.), результат будет сразу виден на странице демонстрации плагина jQuery DataTable.

Скачать код полностью.

Еще есть неплохой пример на странице «Работа с jQuery DataTables»