Pour ce didacticiel, nous allons créer une pagination avec PHP et MySQL, la pagination est la façon dont les utilisateurs navigueront dans certaines parties de votre site Web qui contiennent de grandes quantités de données, nous utiliserons MySQL dans ce didacticiel, nous sélectionnerons des enregistrements dans une base de données et les afficherons dans un tableau utilisant HTML et PHP avec pagination.
Nous afficherons les boutons suivant et précédent dans cette pagination, ainsi que les première et dernière pages, et les pages intermédiaires avec la page actuelle en surbrillance.
Nous devons faire un peu plus de travail que simplement afficher les boutons suivant et précédent, mais c'est parce que nous pouvons changer le code, le changer comme nous le voulons, si nous voulons supprimer les pages de pagination, nous pouvons le faire.
Pagination.php
Continuons et créons le fichier de pagination, nous l'appelleronspagination.php.
Nous devons maintenant nous connecter à notre base de données, nous pouvons le faire avec la ligne de code suivante :
$mysqli = mysqli_connect('localhost', 'root', '', 'pagination');Vous pouvez modifier les informations de connexion, remplacer le texte par vos détails MySQL : mysqli_connect(YOUR_HOST, YOUR_USERNAME, YOUR_PASSWORD, YOUR_DATABASE)
Pour les besoins de ce tutoriel, j'ai créé la base de donnéespagination, ci-dessous se trouve l'instruction SQL de cette base de données, exécutez l'instruction SQL avec phpMyAdmin ou votre outil de gestion de base de données préféré.
CREATE DATABASE IF NOT EXISTS `pagination` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;
USE `pagination`;
CREATE TABLE IF NOT EXISTS `students` (
`id` int(11) NOT NULL,
`name` varchar(255) NOT NULL,
`age` tinyint(1) NOT NULL,
`joined` varchar(10) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=42 DEFAULT CHARSET=utf8;
INSERT INTO `students` (`id`, `name`, `age`, `joined`) VALUES
(1, 'David Deacon', 23, '17/08/2018'),
(2, 'Sheri Warner', 19, '03/05/2018'),
(3, 'Sean Glover', 24, '24/07/2018'),
(4, 'John West', 17, '13/08/2018'),
(5, 'Rufus Clarke', 20, '28/07/2018'),
(6, 'Roosevelt Myers', 20, '25/07/2018'),
(7, 'Elvira Andrews', 22, '02/07/2018'),
(8, 'Richard Cook', 26, '19/07/2018'),
(9, 'Lorenzo Harris', 23, '01/07/2018'),
(10, 'Eduardo Hoffman', 17, '03/07/2018'),
(11, 'Jeanne Fisher', 20, '13/08/2018'),
(12, 'Tracy Bowers', 30, '07/07/2018'),
(13, 'Heidi Lawrence', 18, '04/06/2018'),
(14, 'Tara Holland', 25, '01/07/1991'),
(15, 'Grant Edwards', 22, '22/06/2018'),
(16, 'Bradford Green', 29, '02/05/2018'),
(17, 'Gwen Schultz', 20, '02/05/2018'),
(18, 'Hope Dawson', 28, '21/08/2018'),
(19, 'Florence Osborne', 19, '17/05/2018'),
(20, 'Rickey Poole', 26, '28/06/2018'),
(21, 'Casey Sutton', 28, '06/07/2018'),
(22, 'Willie Lowe', 23, '11/05/2018'),
(23, 'Stephen Schultz', 28, '15/07/2018'),
(24, 'Eileen Lynch', 18, '12/06/2018'),
(25, 'Aaron Ruiz', 29, '02/05/2018'),
(26, 'Mae Murray', 30, '24/06/2018'),
(27, 'Regina Hanson', 21, '26/07/2018'),
(28, 'Cameron Mclaughlin', 20, '29/07/2018'),
(29, 'Earl Hale', 17, '30/06/2018'),
(30, 'Marta Blair', 24, '10/06/2018'),
(31, 'Alberta Silva', 22, '05/06/2018'),
(32, 'Joanna Holmes', 20, '20/05/2018'),
(33, 'Alex Brock', 30, '12/05/2018'),
(34, 'Colin Wright', 19, '28/05/2018'),
(35, 'Peter Schmidt', 25, '10/07/2018'),
(36, 'Joshua Price', 27, '13/07/2018'),
(37, 'Elias Chandler', 22, '19/07/2018'),
(38, 'Stanley Ross', 21, '02/06/2018'),
(39, 'Vera Cole', 26, '02/05/2018'),
(40, 'Johnny Daniels', 29, '19/07/2018'),
(41, 'Yvonne Hopkins', 21, '16/07/2018');
ALTER TABLE `students` ADD PRIMARY KEY (`id`);
ALTER TABLE `students` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=42;Revenons au fichier PHP de pagination, ce que nous devons faire maintenant est de créer quelques variables importantes que nous utiliserons pour la pagination.
// Get the total number of records from our table "students".
$total_pages = $mysqli->query('SELECT COUNT(*) FROM students')->fetch_row()[0];
// Check if the page number is specified and check if it's a number, if not return the default page number which is 1.
$page = isset($_GET['page']) && is_numeric($_GET['page']) ? $_GET['page'] : 1;
// Number of results to show on each page.
$num_results_on_page = 5;Avec la première variable, nous obtenons le nombre total de lignes de lastudentstable dans notre base de données, celle-ci sera utilisée pour calculer le nombre de pages qu'il y aura. La deuxième variable est utilisée pour déterminer sur quelle page se trouve l'utilisateur, par exemple, si l'URL estpagination.php?page=3alors le numéro de page sera 3, si la page n'existe pas dans l'URL, elle sera par défaut à 1. La troisième variable détermine combien de résultats seront affichés sur chaque page, par exemple, si nous voulions afficher 10 résultats (liste de 10 étudiants), nous allons changer le nombre à 10, la valeur par défaut est 5.
Alors maintenant, nous devons obtenir les enregistrements de la base de données pour la page actuelle, le code suivant ci-dessous fera exactement cela.
if ($stmt = $mysqli->prepare('SELECT * FROM students ORDER BY name LIMIT ?,?')) {
// Calculate the page to get the results we need from our table.
$calc_page = ($page - 1) * $num_results_on_page;
$stmt->bind_param('ii', $calc_page, $num_results_on_page);
$stmt->execute();
// Get the results...
$result = $stmt->get_result();
$stmt->close();
}Il y a quelques choses qui se passent dans le code ci-dessus, la première chose que nous faisons est de préparer l'instruction, cela empêche l'injection SQL, si vous ne le faites pas, vous risquez d'être piraté, le$calc_pagevariable détermine essentiellement l'index de départ dans notre table, après, nous lions les variables (i est pour entier), puis exécutons l'instruction SQL. Le résultat sera stocké dans le$resultvariable.
Maintenant, nous devons afficher ces résultats, les résultats seront affichés dans un tableau, vous pouvez afficher les résultats comme vous le souhaitez mais pour ce tutoriel, nous utiliserons un tableau.
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Join Date</th>
</tr>
<?php while ($row = $result->fetch_assoc()): ?>
<tr>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['age']; ?></td>
<td><?php echo $row['joined']; ?></td>
</tr>
<?php endwhile; ?>
</table>
Le code ci-dessus affichera essentiellement chaque étudiant dans le tableau avec sonName,age, etjoinedDate.
Maintenant, nous devons afficher la pagination.
<?php if (ceil($total_pages / $num_results_on_page) > 0): ?>
<ul class="pagination">
<?php if ($page > 1): ?>
<li class="prev"><a href="pagination.php?page=<?php echo $page-1 ?>">Prev</a></li>
<?php endif; ?>
<?php if ($page > 3): ?>
<li class="start"><a href="pagination.php?page=1">1</a></li>
<li class="dots">...</li>
<?php endif; ?>
<?php if ($page-2 > 0): ?><li class="page"><a href="pagination.php?page=<?php echo $page-2 ?>"><?php echo $page-2 ?></a></li><?php endif; ?>
<?php if ($page-1 > 0): ?><li class="page"><a href="pagination.php?page=<?php echo $page-1 ?>"><?php echo $page-1 ?></a></li><?php endif; ?>
<li class="currentpage"><a href="pagination.php?page=<?php echo $page ?>"><?php echo $page ?></a></li>
<?php if ($page+1 < ceil($total_pages / $num_results_on_page)+1): ?><li class="page"><a href="pagination.php?page=<?php echo $page+1 ?>"><?php echo $page+1 ?></a></li><?php endif; ?>
<?php if ($page+2 < ceil($total_pages / $num_results_on_page)+1): ?><li class="page"><a href="pagination.php?page=<?php echo $page+2 ?>"><?php echo $page+2 ?></a></li><?php endif; ?>
<?php if ($page < ceil($total_pages / $num_results_on_page)-2): ?>
<li class="dots">...</li>
<li class="end"><a href="pagination.php?page=<?php echo ceil($total_pages / $num_results_on_page) ?>"><?php echo ceil($total_pages / $num_results_on_page) ?></a></li>
<?php endif; ?>
<?php if ($page < ceil($total_pages / $num_results_on_page)): ?>
<li class="next"><a href="pagination.php?page=<?php echo $page+1 ?>">Next</a></li>
<?php endif; ?>
</ul>
<?php endif; ?>
La première chose que nous faisons ici est de vérifier s'il y a plus d'une page, pas besoin d'afficher la pagination s'il n'y a qu'une seule page. Nous vérifions ensuite si la page actuelle est supérieure à 1, si c'est le cas, affichons le bouton précédent, puis si la page est supérieure à 3, nous pouvons afficher la première page, qui est 1.
Après cela, nous affichons les 2 pages avant et après la page actuelle, donc si la page est 5, elle sera affichée comme ceci1 ... 3 4 5 6 7 ... 14, c'est fondamentalement la même chose que nous avons fait après mais en sens inverse.
Maintenant, nous devons ajouter du style à notre pagination et à notre tableau, le code CSS suivant fera exactement cela.
table {
border-collapse: collapse;
width: 500px;
}
td, th {
padding: 10px;
}
th {
background-color: #54585d;
color: #ffffff;
font-weight: bold;
font-size: 13px;
border: 1px solid #54585d;
}
td {
color: #636363;
border: 1px solid #dddfe1;
}
tr {
background-color: #f9fafb;
}
tr:nth-child(odd) {
background-color: #ffffff;
}
.pagination {
list-style-type: none;
padding: 10px 0;
display: inline-flex;
justify-content: space-between;
box-sizing: border-box;
}
.pagination li {
box-sizing: border-box;
padding-right: 10px;
}
.pagination li a {
box-sizing: border-box;
background-color: #e2e6e6;
padding: 8px;
text-decoration: none;
font-size: 12px;
font-weight: bold;
color: #616872;
border-radius: 4px;
}
.pagination li a:hover {
background-color: #d4dada;
}
.pagination .next a, .pagination .prev a {
text-transform: uppercase;
font-size: 12px;
}
.pagination .currentpage a {
background-color: #518acb;
color: #fff;
}
.pagination .currentpage a:hover {
background-color: #518acb;
}Vous devriez maintenant avoir quelque chose qui ressemblera à ceci :
La source
Le pleinpagination.phpla source:
<?php
// Below is optional, remove if you have already connected to your database.
$mysqli = mysqli_connect('localhost', 'root', '', 'pagination');
// Get the total number of records from our table "students".
$total_pages = $mysqli->query('SELECT * FROM students')->num_rows;
// Check if the page number is specified and check if it's a number, if not return the default page number which is 1.
$page = isset($_GET['page']) && is_numeric($_GET['page']) ? $_GET['page'] : 1;
// Number of results to show on each page.
$num_results_on_page = 5;
if ($stmt = $mysqli->prepare('SELECT * FROM students ORDER BY name LIMIT ?,?')) {
// Calculate the page to get the results we need from our table.
$calc_page = ($page - 1) * $num_results_on_page;
$stmt->bind_param('ii', $calc_page, $num_results_on_page);
$stmt->execute();
// Get the results...
$result = $stmt->get_result();
?>
<!DOCTYPE html>
<html>
<head>
<title>PHP & MySQL Pagination by CodeShack</title>
<meta charset="utf-8">
<style>
html {
font-family: Tahoma, Geneva, sans-serif;
padding: 20px;
background-color: #F8F9F9;
}
table {
border-collapse: collapse;
width: 500px;
}
td, th {
padding: 10px;
}
th {
background-color: #54585d;
color: #ffffff;
font-weight: bold;
font-size: 13px;
border: 1px solid #54585d;
}
td {
color: #636363;
border: 1px solid #dddfe1;
}
tr {
background-color: #f9fafb;
}
tr:nth-child(odd) {
background-color: #ffffff;
}
.pagination {
list-style-type: none;
padding: 10px 0;
display: inline-flex;
justify-content: space-between;
box-sizing: border-box;
}
.pagination li {
box-sizing: border-box;
padding-right: 10px;
}
.pagination li a {
box-sizing: border-box;
background-color: #e2e6e6;
padding: 8px;
text-decoration: none;
font-size: 12px;
font-weight: bold;
color: #616872;
border-radius: 4px;
}
.pagination li a:hover {
background-color: #d4dada;
}
.pagination .next a, .pagination .prev a {
text-transform: uppercase;
font-size: 12px;
}
.pagination .currentpage a {
background-color: #518acb;
color: #fff;
}
.pagination .currentpage a:hover {
background-color: #518acb;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Join Date</th>
</tr>
<?php while ($row = $result->fetch_assoc()): ?>
<tr>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['age']; ?></td>
<td><?php echo $row['joined']; ?></td>
</tr>
<?php endwhile; ?>
</table>
<?php if (ceil($total_pages / $num_results_on_page) > 0): ?>
<ul class="pagination">
<?php if ($page > 1): ?>
<li class="prev"><a href="pagination.php?page=<?php echo $page-1 ?>">Prev</a></li>
<?php endif; ?>
<?php if ($page > 3): ?>
<li class="start"><a href="pagination.php?page=1">1</a></li>
<li class="dots">...</li>
<?php endif; ?>
<?php if ($page-2 > 0): ?><li class="page"><a href="pagination.php?page=<?php echo $page-2 ?>"><?php echo $page-2 ?></a></li><?php endif; ?>
<?php if ($page-1 > 0): ?><li class="page"><a href="pagination.php?page=<?php echo $page-1 ?>"><?php echo $page-1 ?></a></li><?php endif; ?>
<li class="currentpage"><a href="pagination.php?page=<?php echo $page ?>"><?php echo $page ?></a></li>
<?php if ($page+1 < ceil($total_pages / $num_results_on_page)+1): ?><li class="page"><a href="pagination.php?page=<?php echo $page+1 ?>"><?php echo $page+1 ?></a></li><?php endif; ?>
<?php if ($page+2 < ceil($total_pages / $num_results_on_page)+1): ?><li class="page"><a href="pagination.php?page=<?php echo $page+2 ?>"><?php echo $page+2 ?></a></li><?php endif; ?>
<?php if ($page < ceil($total_pages / $num_results_on_page)-2): ?>
<li class="dots">...</li>
<li class="end"><a href="pagination.php?page=<?php echo ceil($total_pages / $num_results_on_page) ?>"><?php echo ceil($total_pages / $num_results_on_page) ?></a></li>
<?php endif; ?>
<?php if ($page < ceil($total_pages / $num_results_on_page)): ?>
<li class="next"><a href="pagination.php?page=<?php echo $page+1 ?>">Next</a></li>
<?php endif; ?>
</ul>
<?php endif; ?>
</body>
</html>
<?php
$stmt->close();
}
?>Conclusion
Félicitations, vous avez réussi à créer une pagination entièrement fonctionnelle pour votre site Web, il existe de nombreuses façons de créer une pagination, cette méthode est probablement l'une des meilleures et elle est sécurisée ! N'oubliez pas de vous abonner et de partager, comme, suivez nos comptes de médias sociaux si vous aimez ce tutoriel, aidez notre site à se développer et nous vous fournirons de nombreux tutoriels plus utiles.