Вывод HTML-таблицы с функцией сортировки на PHP + MySQL

Несколько примеров как вывести данные из БД в таблицу и добавить к ней возможность сортировки.

Итак, простой вывод таблицы и базы:

<?php
/* Запрос в БД */
$dbh = new PDO('mysql:dbname=db_name;host=localhost', 'логин', 'пароль');
$sth = $dbh->prepare("SELECT * FROM `tours` ORDER BY `hotel`");
$sth->execute();
$list = $sth->fetchAll(PDO::FETCH_ASSOC);
PHP

Вывод:

<table>
	<thead>
		<tr>
			<th>Заезд</th>
			<th>Отель</th>
			<th>Курорт</th>
			<th>Тип номера</th>
			<th>Питание</th>
			<th>Цена</th>
		</tr>
	</thead>
	<tbody>
		<?php foreach ($list as $row): ?>
		<tr>
			<td><?php echo $row['date']; ?></td>
			<td><?php echo $row['hotel']; ?></td>
			<td><?php echo $row['city']; ?></td>
			<td><?php echo $row['type']; ?></td>
			<td><?php echo $row['food']; ?></td>
			<td><?php echo $row['price']; ?> EUR</td>
		</tr>
		<?php endforeach; ?>    
	</tbody>
</table>
HTML

Результат:

Основной принцип пользовательской сортировки основан на GET параметрах, к ссылке в href добавляется параметр ?sort=xxx со значением текущей сортировки. PHP-скрипт его получает, проверяет и подставляет в SQL-запрос.

Далее рассмотрим его детально на нескольких примерах:

Заведем массив $sort_list с ключами и вариантами сортировки, чтобы упростить вывод ссылок заведем функцию sort_link_th(), которая будет их формировать исходя из значения переменной $_GET['sort'].

<?php
/* Все варианты сортировки */
$sort_list = array(
	'date_asc'   => '`date`',
	'date_desc'  => '`date` DESC',
	'hotel_asc'  => '`hotel`',
	'hotel_desc' => '`hotel` DESC',
	'city_asc'   => '`city`',
	'city_desc'  => '`city` DESC',
	'type_asc'   => '`type`',
	'type_desc'  => '`type` DESC',
	'food_asc'   => '`food`',
	'food_desc'  => '`food` DESC',
	'price_asc'  => '`price`',
	'price_desc' => '`price` DESC',   
);

/* Проверка GET-переменной */
$sort = @$_GET['sort'];
if (array_key_exists($sort, $sort_list)) {
	$sort_sql = $sort_list[$sort];
} else {
	$sort_sql = reset($sort_list);
}

/* Запрос в БД */
$dbh = new PDO('mysql:dbname=db_name;host=localhost', 'логин', 'пароль');
$sth = $dbh->prepare("SELECT * FROM `tours` ORDER BY {$sort_sql}");
$sth->execute();
$list = $sth->fetchAll(PDO::FETCH_ASSOC);

/* Функция вывода ссылок */
function sort_link_th($title, $a, $b) {
	$sort = @$_GET['sort'];

	if ($sort == $a) {
		return '<a class="active" href="?sort=' . $b . '">' . $title . ' <i>▲</i></a>';
	} elseif ($sort == $b) {
		return '<a class="active" href="?sort=' . $a . '">' . $title . ' <i>▼</i></a>';  
	} else {
		return '<a href="?sort=' . $a . '">' . $title . '</a>';  
	}
}
PHP

Вывод:

<table>
	<thead>
		<tr>
			<th><?php echo sort_link_th('Заезд', 'date_asc', 'date_desc'); ?></th>
			<th><?php echo sort_link_th('Отель', 'hotel_asc', 'hotel_desc'); ?></th>
			<th><?php echo sort_link_th('Курорт', 'city_asc', 'city_desc'); ?></th>
			<th><?php echo sort_link_th('Тип номера', 'type_asc', 'type_desc'); ?></th>
			<th><?php echo sort_link_th('Питание', 'food_asc', 'food_desc'); ?></th>
			<th><?php echo sort_link_th('Цена', 'price_asc', 'price_desc'); ?></th>
		</tr>
	</thead>
	<tbody>
		<?php foreach ($list as $row): ?>
		<tr>
			<td><?php echo $row['date']; ?></td>
			<td><?php echo $row['hotel']; ?></td>
			<td><?php echo $row['city']; ?></td>
			<td><?php echo $row['type']; ?></td>
			<td><?php echo $row['food']; ?></td>
			<td><?php echo $row['price']; ?> EUR</td>
		</tr>
		<?php endforeach; ?>    
	</tbody>
</table>
HTML

Результат:

Преведущий код немного переделан:

<?php
/* Все варианты сортировки */
$sort_list = array(
	'date_asc'   => '`date`',
	'date_desc'  => '`date` DESC',
	'hotel_asc'  => '`hotel`',
	'hotel_desc' => '`hotel` DESC',
	'city_asc'   => '`city`',
	'city_desc'  => '`city` DESC',
	'type_asc'   => '`type`',
	'type_desc'  => '`type` DESC',
	'food_asc'   => '`food`',
	'food_desc'  => '`food` DESC',
	'price_asc'  => '`price`',
	'price_desc' => '`price` DESC',   
);

/* Проверка GET-переменной */
$sort = @$_GET['sort'];
if (array_key_exists($sort, $sort_list)) {
	$sort_sql = $sort_list[$sort];
} else {
	$sort_sql = reset($sort_list);
}

/* Запрос в БД */
$dbh = new PDO('mysql:dbname=db_name;host=localhost', 'логин', 'пароль');
$sth = $dbh->prepare("SELECT * FROM `tours` ORDER BY {$sort_sql}");
$sth->execute();
$list = $sth->fetchAll(PDO::FETCH_ASSOC);

/* Функция вывода ссылок */
function sort_link_bar($title, $a, $b) {
	$sort = @$_GET['sort'];

	if ($sort == $a) {
		return '<a class="active" href="?sort=' . $b . '">' . $title . ' <i>↑</i></a>';
   	} elseif ($sort == $b) {
		return '<a class="active" href="?sort=' . $a . '">' . $title . ' <i>↓</i></a>';  
	} else {
		return '<a href="?sort=' . $a . '">' . $title . '</a>';  
	}
}
PHP

Вывод:

<div class="sort-bar">
	<div class="sort-bar-title">Сортировать по:</div> 
	<div class="sort-bar-list">
		<?php echo sort_link_bar('Заезд', 'date_asc', 'date_desc'); ?>
		<?php echo sort_link_bar('Отель', 'hotel_asc', 'hotel_desc'); ?>
		<?php echo sort_link_bar('Курорт', 'city_asc', 'city_desc'); ?>
		<?php echo sort_link_bar('Тип номера', 'type_asc', 'type_desc'); ?>
		<?php echo sort_link_bar('Питание', 'food_asc', 'food_desc'); ?>
		<?php echo sort_link_bar('Цена', 'price_asc', 'price_desc'); ?>
	</div> 
 </div> 

<table>
	<thead>
		<tr>
			<th>Заезд</th>
			<th>Отель</th>
			<th>Курорт</th>
			<th>Тип номера</th>
			<th>Питание</th>
			<th>Цена</th>
		</tr>
	</thead>
	<tbody>
		<?php foreach ($list as $row): ?>
		<tr>
			<td><?php echo $row['date']; ?></td>
			<td><?php echo $row['hotel']; ?></td>
			<td><?php echo $row['city']; ?></td>
			<td><?php echo $row['type']; ?></td>
			<td><?php echo $row['food']; ?></td>
			<td><?php echo $row['price']; ?> EUR</td>
		</tr>
		<?php endforeach; ?>    
	</tbody>
</table>
HTML

Во этом примере управление сортировкой будет производится с помощью <select>, при его изменении отправляется форма c выбранным ключом сортировки.

<?php
/* Все варианты сортировки */
$sort_list = array(
	'date'       => '`date`',
	'type'       => '`type`',
	'food'       => '`food`',
	'price_asc'  => '`price`',
	'price_desc' => '`price` DESC',   
);

/* Проверка GET-переменной */
$sort = @$_GET['sort'];
if (array_key_exists($sort, $sort_list)) {
	$sort_sql = $sort_list[$sort];
} else {
	$sort_sql = reset($sort_list);
}

/* Запрос в БД */
$dbh = new PDO('mysql:dbname=db_name;host=localhost', 'логин', 'пароль');
$sth = $dbh->prepare("SELECT * FROM `tours` ORDER BY {$sort_sql}");
$sth->execute();
$list = $sth->fetchAll(PDO::FETCH_ASSOC);
PHP

Вывод:

<form action="" method="get">
	<div class="select-sort">
		<select name="sort" id="js-sort">
			<option value="date" <?php if (@$_GET['sort'] == 'date') echo 'selected'; ?>>Дата заезда</option>
			<option value="price_asc" <?php if (@$_GET['sort'] == 'price_asc') echo 'selected'; ?>>Сначало дешевые</option>
			<option value="price_desc" <?php if (@$_GET['sort'] == 'price_desc') echo 'selected'; ?>>Сначало дорогие</option>
			<option value="type" <?php if (@$_GET['sort'] == 'type') echo 'selected'; ?>>Тип номера</option>
			<option value="food" <?php if (@$_GET['sort'] == 'food') echo 'selected'; ?>>Питание</option>
		</select>
	 </div>  
</form>

<script src="/jquery.min.js"></script>

<script>
$('#js-sort').change(function(){
	$(this).closest('form').submit();
});
</script>
 
<table>
	<thead>
		<tr>
			<th>Заезд</th>
			<th>Отель</th>
			<th>Курорт</th>
			<th>Тип номера</th>
			<th>Питание</th>
			<th>Цена</th>
		</tr>
	</thead>
	<tbody>
		<?php foreach ($list as $row): ?>
		<tr>
			<td><?php echo $row['date']; ?></td>
			<td><?php echo $row['hotel']; ?></td>
			<td><?php echo $row['city']; ?></td>
			<td><?php echo $row['type']; ?></td>
			<td><?php echo $row['food']; ?></td>
			<td><?php echo $row['price']; ?> EUR</td>
		</tr>
		<?php endforeach; ?>    
	</tbody>
</table>	
HTML

Результат:

09.10.2020, обновлено 04.12.2021
7411

Комментарии 5

Uzbek No Uzbek No
15 октября 2020 в 14:47
0
Также напишите статью о php websocket
Uzbek No Uzbek No
15 октября 2020 в 14:54
0
как получить от 03.10.2020, от 02.10.2020, от 01.10.2020? Только один с даты
Галина Руднева Галина Руднева
4 марта 2021 в 21:41
0
Добрый вечер! Я попробовала сделать сортировку. Но тут указывается PDO, а у меня MySQL. Как можно сделать тоже самое только с подключением к MySQL? А то у меня БД возвращает нулевой результат....
Тилло Ташмухамедов Тилло Ташмухамедов
13 апреля 2021 в 17:22
0
Все варианта работаю отлично. Спасибо автору.
Тилло Ташмухамедов Тилло Ташмухамедов
21 апреля 2021 в 19:15
0
Третий вариант мне по нравился. Но как туда добавить фильтр? В смысле добавить к имеющейся сортировке....

, чтобы добавить комментарий.

Другие публикации

Сортировка по диапазону цен
Задача: получить из БД интернет-магазина товары в следующем порядке - сначала идут товары у которых цена составляет от 6 000 до 20 000 руб, далее все остальные в порядке возрастания цены.
3389
+1
Примеры использования PDO MySQL
В статье приведены основные примеры работы с расширением PHP PDO. Такие как подключение к БД, получение, изменение и...
66969
+2
CSS display table
CSS-свойство display table и другие, делают вывод группы элементов подобно таблице, но с ограничением – объединения ячеек colspan и rowspan не поддерживаются.
19566
+2
Выделение ячеек таблицы по клику
В продолжении статей о рамках у ячеек таблицы, сделаем их появление по клику с помощью JQuery.
8512
+3
Вывод списка по алфавиту
Представленные способы помогут сделать алфавитный список (указатель) разбитый на колонки, для вывода например станций метро, производителей, категорий и т.д.
5198
+1
Сортировка в MySQL
В этой статье приведены примеры использования оператора ORDER BY для сортировки записей в MySQL.
19107
+6