How to show pagination series with dot in php? - php

Question

code:
<?php
$sql = "SELECT COUNT(*) FROM attandance";
$retval1 = mysqli_query($con, $sql);
$row = mysqli_fetch_row($retval1);
$total_records = $row[0];
$total_pages = ceil($total_records / $limit);
echo "<ul class='pagination'>";
echo "<li><a href='index.php?page=".($page)."' class='button'>Previous</a></li>";
for ($i=1; $i<=$total_pages; $i++) {
echo "<li><a href='index.php?page=".$i."'>".$i."</a></li>";
}
echo "<li><a href='index.php?page=".($page+1)."' class='button'>NEXT</a></li>";
echo "</ul>";
?>
I have create a pagination in php now its work fine but pagination series look like previous 1234567891011121314151617181920 next like this but I want like
Previous 1 2 3 4 5 . . . . 20 next. So, How can I do this ?Please help me.
Thank You

Answer 1

Here is some helpful code for you, please check this.
<?php
// Please place your select query over here.
// $sql = "SELECT COUNT(*) FROM attandance";
// $retval1 = mysqli_query($con, $sql);
// $row = mysqli_fetch_row($retval1);
// $total_records = $row[0];
$page = ((isset($_GET['page'])) && ($_GET['page'] != ''))? $_GET['page'] : 1;
echo "You are on Page: ".$page;
$limit = 5; // I'm all this as static, please change it
$total_records = 34; // I'm all this as static, please change it to `$row[0]`
$total_pages = ceil($total_records / $limit);
echo "<ul class='pagination'>";
if ($page > 1)
echo "<li><a href='index.php?page=".($page - 1)."' class='button'>PREVIOUS</a></li>";
$show = 0;
for ($i = $page; $i <= $total_pages; $i++) {
$show++;
if ($page == $i)
echo "<li class='active'>".$i."</li>";
else if (($show < 5) || ($total_pages == $i))
echo "<li><a href='index.php?page=".$i."'>".$i."</a></li>";
else
echo "<li class='dot'>.</li>";
}
if ($total_pages > $page)
echo "<li><a href='index.php?page=".($page + 1)."' class='button'>NEXT</a></li>";
echo "</ul>";
?>
If you need some CSS, try using:
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
li.active {
display: block;
color: red;
text-align: center;
padding: 16px;
text-decoration: none;
}
li.dot {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
</style>