Pokud potřebujeme vypsat větší množství dat, je vždy dobré vložit do stránky možnost filtrace nebo stránkování. Následující příklad ukazuje možnost tohoto řešení na starší databázi obcí:
<!DOCTYPE html>
<html lang="cs">
<head>
<title>Výpis obcí</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
<style>
body {
background-color: #737373;
background-image: linear-gradient(#0008ff, #00ff7e);
background-size: cover;
background-attachment: fixed;
}
/* pozadí containeru */
.container {
background-color: white;
}
.panel-collapse {
padding: 15px;
}
a {
color: red;
text-decoration: underline;
}
</style>
<body>
<div class="container py-4 mt-3">
<div class="page-header mb-4">
<h1>Výpis obcí</h1>
<p>Možnost nastavení počtu záznamů a stránkování.</p>
</div>
<?php
header("Content-Type: text/html; charset=utf-8");
//řádek kvůli správnému kódování
include('db.php');
//vložení externího souboru s připojením
// 1. Získání a ošetření filtrů
$hledat = isset($_GET['hledat']) ? mysqli_real_escape_string($spojeni, $_GET['hledat']) : '';
$povolené_typy = [10, 20, 50, 100];
$pocet_obci_na_stranku = isset($_GET['pocet']) && in_array((int)$_GET['pocet'], $povolené_typy) ? (int)$_GET['pocet'] : 20;
// 2. Číslo stránky
$cislo_stranky = isset($_GET['cislo_stranky']) ? (int)$_GET['cislo_stranky'] : 1;
if ($cislo_stranky < 1) $cislo_stranky = 1;
// Podmínka pro SQL filtr
$where_sql = ($hledat != "") ? " WHERE Nazev LIKE '%$hledat%' " : "";
// 3. Celkový počet (musí zahrnovat i filtr!)
$vysledek_pocet = mysqli_query($spojeni, "SELECT COUNT(*) as pocet FROM Obce $where_sql");
$data_pocet = mysqli_fetch_array($vysledek_pocet);
$celkem_obci = $data_pocet['pocet'];
$celkem_stranek = ceil($celkem_obci / $pocet_obci_na_stranku);
if ($cislo_stranky > $celkem_stranek && $celkem_stranek > 0) $cislo_stranky = $celkem_stranek;
$offset = ($cislo_stranky - 1) * $pocet_obci_na_stranku;
// Parametry pro URL
$url_param = "&pocet=$pocet_obci_na_stranku&hledat=" . urlencode($hledat);
?>
<div class="card card-body bg-light mb-4 shadow-sm border-0">
<form method="GET" class="row gy-2 gx-3 align-items-center">
<div class="col-auto">
<label for="hledat" class="form-label mb-0">Hledat:</label>
</div>
<div class="col-auto">
<input type="text" name="hledat" id="hledat" class="form-control form-control-sm" value="<?= htmlspecialchars($hledat) ?>" placeholder="Název obce...">
</div>
<div class="col-auto ms-md-auto">
<label for="pocet" class="form-label mb-0">Zobrazit:</label>
</div>
<div class="col-auto">
<select name="pocet" id="pocet" class="form-select form-select-sm w-auto" onchange="this.form.submit()">
<?php foreach ($povolené_typy as $hodnota): ?>
<option value="<?= $hodnota ?>" <?= $pocet_obci_na_stranku == $hodnota ? 'selected' : '' ?>>
<?= $hodnota ?>
</option>
<?php endforeach; ?>
</select>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary btn-sm">Filtrovat</button>
<a href="/?" class="btn btn-outline-secondary btn-sm">Zrušit</a>
</div>
<input type="hidden" name="cislo_stranky" value="1">
</form>
</div>
<?php
echo "<b>Celkový počet obcí: " . $celkem_obci . "</b> (Zobrazeno $pocet_obci_na_stranku na stránku)<hr>";
// 4. Dotaz na data
$obce = mysqli_query($spojeni, "SELECT * FROM Obce $where_sql ORDER BY Nazev LIMIT $offset, $pocet_obci_na_stranku");
if (!$obce || mysqli_num_rows($obce) == 0) {
echo "Nebyla nalezena žádná obec odpovídající zadání.";
} else {
echo '<div class="card shadow-sm border-0"><div class="table-responsive">
<table class="table table-hover table-striped mb-0">
<thead class="table-dark">
<tr>
<th>Název</th><th>PSČ</th><th>Počet obyvatel</th><th>Kraj</th><th>Okres</th><th>Pošta</th>
</tr>
</thead>
<tbody>';
while ($obec = mysqli_fetch_array($obce)) {
echo "<tr>
<td>{$obec['Nazev']}</td>
<td>{$obec['PSC']}</td>
<td>{$obec['Obyvatel']}</td>
<td>{$obec['Kraj']}</td>
<td>{$obec['Okres']}</td>
<td>{$obec['Posta']}</td>
</tr>";
}
echo '</tbody></table></div></div>';
}
?>
<!-- Následuje stránkování -->
<?php if ($celkem_stranek > 1): ?>
<nav aria-label="Navigace stránkování" class="mt-4">
<ul class="pagination justify-content-center">
<li class="page-item <?= ($cislo_stranky <= 1) ? 'disabled' : '' ?>">
<a class="page-link" href="/?cislo_stranky=1<?= $url_param ?>">Začátek</a>
</li>
<li class="page-item <?= ($cislo_stranky <= 1) ? 'disabled' : '' ?>">
<a class="page-link" href="/<?= ($cislo_stranky <= 1) ? '#' : '?cislo_stranky=' . ($cislo_stranky - 1) . $url_param ?>">Předchozí</a>
</li>
<li class="page-item active"><span class="page-link">Strana <?= $cislo_stranky ?> z <?= $celkem_stranek ?></span></li>
<li class="page-item <?= ($cislo_stranky >= $celkem_stranek) ? 'disabled' : '' ?>">
<a class="page-link" href="/<?= ($cislo_stranky >= $celkem_stranek) ? '#' : '?cislo_stranky=' . ($cislo_stranky + 1) . $url_param ?>">Další</a>
</li>
<li class="page-item <?= ($cislo_stranky >= $celkem_stranek) ? 'disabled' : '' ?>">
<a class="page-link" href="/?cislo_stranky=<?= $celkem_stranek . $url_param ?>">Konec</a>
</li>
</ul>
</nav>
<?php endif; ?>
<!-- Ukončení kontejneru - NEMAZAT -->
</div>
</body>
</html>K napojení do databáze je použit stejný soubor, jako v předchozích článcích, tedy db.php.
Výsledek můžete vidět v tomto demu.