Алфавитный указатель

Пример, как вывести список из базы данных с группировкой и алфавитным указателем.

Чтобы не делать запросы к БД по каждой букве, сделан один большой запрос с выделением первой буквы из названия в отдельное поле `letter` и преобразованием её в верхний регистр. Далее полученный результат скомпонован в массив, ключ будет содержать букву, а значение, массив всех записей по данной букве.

<?php
$data = array();

// Английский алфавит
$en = array(
	'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 
	'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
);	

// Русский алфавит
$ru = array(
	'А', 'Б', 'В', 'Г', 'Д', 'Е', 'Ж', 'З', 'И', 'Й', 'К', 'Л', 'М', 
	'Н', 'О', 'П', 'Р', 'С', 'Т', 'У', 'Ф', 'Х', 'Ц', 'Ч', 'Ш', 'Щ', 
	'Ъ', 'Ы', 'Ь', 'Э', 'Ю', 'Я'
);

// Достаем все записи из БД, выделяем первую букву названия в отдельное поле
$dbh = new PDO('mysql:dbname=db_name;host=localhost', 'логин', 'пароль');
$sth = $dbh->prepare("SELECT *, UPPER(LEFT(`name`, 1)) AS `letter` FROM `table` ORDER BY `name`");
$sth->execute();
$list = $sth->fetchAll(PDO::FETCH_ASSOC);

// Компонуем массив в виде буква => все записи
$data = array();
foreach ($list as $list_row) {
	foreach ($en as $row) {
		if ($list_row['letter'] == $row) {
			$data[$row][] = $list_row;	
		}
	}
	foreach ($ru as $row) {
		if ($list_row['letter'] == $row) {
			$data[$row][] = $list_row;	
		}
	}
}
PHP

Вывод на страницу

Чтобы вывести массив в несколько колонок применена функция array_chunk() и два вложенных цикла foreach.

<div class="pointer">
	<?php 
	foreach ($en as $row) {
		if (empty($data[$row])) {
			echo '<span>' . $row . '</span>';
		} else {
			echo '<a href="#' . $row . '">' . $row . '</a>';
		}
	}
	?>
</div>	

<div class="pointer">
	<?php 
	foreach ($ru as $row) {
		if (empty($data[$row])) {
			echo '<span>' . $row . '</span>';
		} else {
			echo '<a href="#' . $row . '">' . $row . '</a>';
		}
	}
	?>
</div>	

<?php 
foreach ($data as $i => $items) {
	if (!empty($items)) {
		$items = array_chunk($items, ceil(count($items) / 5));
		?>
		<h2 id="<?php echo $i; ?>"><?php echo $i; ?></h2>
		<table class="list">
			<tr>
				<?php foreach ($items as $item): ?>
				<td>
					<ul>
						<?php foreach ($item as $row): ?>
						<li><a href="#"><?php echo $row['name']; ?></a></li>
						<?php endforeach; ?>
					</ul>
				</td>
				<?php endforeach; ?>
			</tr>
		</table>
		<?php
	}
}
?>
HTML

CSS:

/* Навигация */
.pointer {
	margin-bottom: 10px;
	font-size: 16px;
}
.pointer a {
	display: inline-block;
	padding: 3px;
	font-weight: 600;
	color: orange;
	text-decoration: none;
}
.pointer span {
	display: inline-block;
	padding: 3px;
	color: #999;
}

/* Список */
.list td {
	width: 120px;
	padding: 5px;
	vertical-align: top;
}
.list ul {
	padding: 0;
	margin: 0 0 0 10px;
}
.list ul li {
	padding: 0;
	margin: 0 0 3px 0;
}
.list ul li a {
	color: #1076de;
	font-size: 16px;
	text-decoration: none;
}
CSS

Результат:

24.09.2020

Комментарии

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

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

В данном примере описано как вывести многоуровневый список checkbox и radio button из БД с помощью PHP функций...
6268
+2
CSS-свойство display table и другие, делают вывод группы элементов подобно таблице, но с ограничением – объединения ячеек colspan и rowspan не поддерживаются.
6205
0
Несколько примеров как задать стили у нумерации списков с применением счетчика counter и псевдоэлемтов :before и...
9229
+5
AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать контент и т.д. А функции JQuery значительно упрощают работу.
43393
+9
Smarty это компилирующий обработчик шаблонов для PHP позволяющий отделить логику и HTML-верстку веб-приложения.
7065
+3
Для примера возьмем статейный сайт, на нём нужно сделать счетчик просмотров статей, с выводом результатов за день,...
3462
+8