Пагинация PHP | Комплект 3
В предыдущей статье PHP Pagination | В наборе 2 мы разработали простую систему нумерации страниц, которая была логически правильной, но не казалась визуально привлекательной из-за того, что все номера страниц располагались друг над другом и занимали много места на экране. Тогда какое лекарство? Это просто, когда пользователь ищет конкретный номер страницы, можно предположить, что он будет перемещаться последовательно. Например, если вы находитесь на странице номер 12, мы можем предположить, что вы перейдете на соседние страницы, а не прямо на страницу номер 122. Предполагая это, многие системы разбивки на страницы развиваются и также становятся визуально привлекательными. Давайте рассмотрим систему GeeksforGeeks Pagination. На следующем рисунке изображено то же самое.
Как видите, система разбивки на страницы GeeksforGeeks намного лучше, она имеет возможность видеть общее количество страниц. У него также есть последняя и следующая кнопка, и аналогично предыдущая и первая кнопки также присутствуют динамически, т.е. на основе номера текущей страницы отображается комбинация этих кнопок. Теперь, прежде чем приступить к совершенствованию нашей собственной системы разбивки на страницы, мы должны отметить, какие функции мы должны использовать.
Анализ особенностей
- Прежде всего, мы не хотим отображать 150 страниц, мы будем показывать только локальный набор страниц на основе текущего номера страницы.
- У нас также должны быть кнопки «предыдущий / следующий» и «первый / последний» для быстрой навигации.
- Если подумать, движения пользователя можно разделить на три класса. Последовательный, случайный и гибридный. Создав ссылку на локальные страницы и кнопку «следующая / предыдущая», мы позаботились о последовательном перемещении. Для случайного перемещения у нас должно быть поле ввода, где пользователь может ввести конкретный номер страницы, а остальные навигационные ссылки должны измениться соответствующим образом.
Когда мы определили функции, которые нужно добавить, давайте перейдем к окончательному исходному коду и объясним, как мы достигли требований.
Final Source Code
<!DOCTYPE html><html> <head> <title>ProGeeks Cup 2.0</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" <style> .inline{ display: inline-block; float: right; margin: 20px 0px; } input, button{ height: 34px; } </style> </head> <body> <?php require_once "connection.php"; $limit = 10; if (isset($_GET["page"])) { $pn = $_GET["page"]; } else { $pn=1; }; $start_from = ($pn-1) * $limit; $sql = "SELECT * FROM table1 LIMIT $start_from, $limit"; $rs_result = mysql_query ($sql); ?> <div class="container"> <br> <div> <h1>ProGeeks Cup 2.0</h1> <p>This page is just for demonstration of Basic Pagination using PHP.</p> <table class="table table-striped table-condensed table-bordered"> <thead> <tr> <th width="10%">Rank</th> <th>Name</th> <th>College</th> <th>Score</th> </tr> </thead> <tbody> <?php while ($row = mysql_fetch_array($rs_result, MYSQL_ASSOC)) { ?> <tr> <td><?php echo $row["rank"]; ?></td> <td><?php echo $row["name"]; ?></td> <td><?php echo $row["college"]; ?></td> <td><?php echo $row["score"]; ?></td> </tr> <?php }; ?> </tbody> </table> <div> <ul class="pagination"> <?php $sql = "SELECT COUNT(*) FROM table1"; $rs_result = mysql_query($sql); $row = mysql_fetch_row($rs_result); $total_records = $row[0]; $total_pages = ceil($total_records / $limit); $k = (($pn+4>$total_pages)?$total_pages-4:(($pn-4<1)?5:$pn)); $pagLink = ""; if($pn>=2){ echo "<li><a href="index.php?page=1"> << </a></li>"; echo "<li><a href="index.php?page=".($pn-1).""> < </a></li>"; } for ($i=-4; $i<=4; $i++) { if($k+$i==$pn) $pagLink .= "<li class="active"><a href="index.php?page=".($k+$i)."">".($k+$i)."</a></li>"; else $pagLink .= "<li><a href="index.php?page=".($k+$i)."">".($k+$i)."</a></li>"; }; echo $pagLink; if($pn<$total_pages){ echo "<li><a href="index.php?page=".($pn+1).""> > </a></li>"; echo "<li><a href="index.php?page=".$total_pages.""> >> </a></li>"; } ?> </ul> <div class="inline"> <input id="pn" type="number" min="1" max="<?php echo $total_pages?>" placeholder="<?php echo $pn."/".$total_pages; ?>" required> <button onclick="go2Page();">Go</button> </div> </div> </div> </div> <script> function go2Page() { var pn = document.getElementById("pn").value; pn = ((pn><?php echo $total_pages; ?>)?<?php echo $total_pages; ?>:((pn<1)?1:pn)); window.location.href = "index.php?page="+pn; } </script> </body></html> |
Ого! Это слишком сложно для понимания! Не бойтесь, мы включили только те, которые выделены, а также некоторые стили CSS, новую разметку HTML и немного логики. Давайте не будем медлить с объяснением того, что мы изменили, и представим окончательный результат.
Код для последовательного движения
The idea behind this code is very simple. We want to take a middle index $k and we want to print the neighbor pages to create the sequential links. Before echoing the sequence we echo the previous and first-page links if the current page is not the first page. Similarly, after echoing the sequence we echo the next and last-page links if the current page is not the last page. In this case, we intend to show a total of 9 links of pages that form the sequence.
// K is assumed to be the middle index.$k = (($pn+4>$total_pages)?$total_pages-4:(($pn-4<1)?5:$pn)); // Show prev and first-page links.if($pn>=2){ echo "<li><a href="index.php?page=1"> << </a></li>"; echo "<li><a href="index.php?page=".($pn-1).""> < </a></li>";} // Show sequential links.for ($i=-4; $i<=4; $i++) { if($k+$i==$pn) $pagLink .= "<li class="active"><a href="index.php?page=".($k+$i)."">".($k+$i)."</a></li>"; else $pagLink .= "<li><a href="index.php?page=".($k+$i)."">".($k+$i)."</a></li>"; }; echo $pagLink; // Show next and last-page links.if($pn<$total_pages){ echo "<li><a href="index.php?page=".($pn+1).""> > </a></li>"; echo "<li><a href="index.php?page=".$total_pages.""> >> </a></li>";} |
Код для случайного движения
The idea behind this is also fairly simple, we will provide an input field where the user can input any numerical value, after which we will check if the given value is valid and then we will go to the page. This doesn’t require much of PHP as it can be done using JS. PHP is used only to give us the value of $total_pages present etc. In order to develop the above-mentioned feature, we first added the following markup and then added the function to handle click event.
<div class="inline"> <input id="pn" type="number" min="1" max="<?php echo $total_pages?>" placeholder="<?php echo $pn."/".$total_pages; ?>" required> <button onclick="go2Page();">Go</button></div> |
function go2Page(){ var pn = document.getElementById("pn").value; // Check if pn is between the max and min. pn = ((pn><?php echo $total_pages; ?>)?<?php echo $total_pages; ?>:((pn<1)?1:pn)); window.location.href = "index.php?page=" + pn;} |
Остальные обновления - это просто немного CSS, чтобы он выглядел немного более привычным. Наконец, окончательный результат, который мы получаем, показан на рисунке ниже.
Я получил удовольствие от создания этой системы разбиения на страницы и очень рад, что она оказалась достойной. Если вам нужны исходные файлы и набор данных, посетите мой репозиторий. Удачного обучения.