Это руководство о том, как сделать простое разбиение на страницы, используя PHP и MySQL с плагином jQuery Simple Pagination.
Simplepagination.js — это простой плагин для jQuery, поддерживающий CSS3 и Bootstrap.
Шаг 1: Включаем все js и css файлы
Плагин jQuery Simple Pagination скачиваем отсюда.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="dist/simplePagination.css" /><script src="dist/jquery.simplePagination.js"></script>
Шаг 2: Создаём соединение с MySQL с использованием PHP
<?
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test";
$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());
if (mysqli_connect_errno()) {
printf("Ошибка соединения: %s\n", mysqli_connect_error());
exit();
}
?>
Шаг 3: Создаём HTML таблицы с записями MySQL
<table class="table table-bordered">
<thead>
<tr>
<th>Имя</th>
<th>Оклад</th>
<th>Возраст</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT COUNT(id) FROM employee";
$rs_result = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_assoc($rs_result)) {
?>
<tr>
<td><?php echo $row["employee_name"]; ?></td>
<td><?php echo $row["employee_salary"]; ?></td>
<td><?php echo $row["employee_age"]; ?></td>
</tr>
<?php };
?>
</tbody>
</table>
<?php
$sql = "SELECT COUNT(id) FROM employee";
$rs_result = mysqli_query($conn, $sql);
$row = mysqli_fetch_row($rs_result);
$total_records = $row[0];
$total_pages = ceil($total_records / $limit);
$pagLink = "<nav><ul class='pagination'>";
for ($i=1; $i<=$total_pages; $i++) {
$pagLink .= "<li><a href='index.php?page=".$i."'>".$i."</a></li>";
};
echo $pagLink . "</ul></nav>";
?>
Шаг 4: Вызываем метод simplePagination для контейнера разбиения на страницы
<script>
$(document).ready(function() {
$('.pagination').pagination({
items: <?php echo $total_records;?>,
itemsOnPage: <?php echo $limit;?>,
cssStyle: 'light-theme',
currentPage : <?php echo $page;?>,
hrefTextPrefix : 'index.php?page='
});
});
</script>