I created a table that displays the values from the my mysql table. Then, using the tutorial, I created pagination system.
Top of page:
if (isset($_GET['page']) && $_GET['page']!="") {
$page = $_GET['page'];
} else {
$page = 1;
}
$total_records_per_page = 10;
$offset = ($page-1) * $total_records_per_page;
$previous_page = $page - 1;
$next_page = $page + 1;
$adjacents = "2";
$result_count = mysqli_query(
$conn,
"SELECT COUNT(*) As total_records FROM `snapchat`"
);
$total_records = mysqli_fetch_array($result_count);
$total_records = $total_records['total_records'];
$total_no_of_pages = ceil($total_records / $total_records_per_page);
$second_last = $total_no_of_pages - 1;
Bottom of page:
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<?php // if($page > 1){ echo "<li><a href='?page=1'>First Page</a></li>"; } ?>
<li <?php if($page <= 1){ echo "class='page-item page-link disabled' style='color:black;'"; } ?>>
<a <?php if($page > 1){ echo "class='page-link' href='?page=$previous_page'"; } ?>>Poprzednia</a>
</li>
<?php
if ($total_no_of_pages <= 10){
for ($counter = 1; $counter <= $total_no_of_pages; $counter++){
if ($counter == $page) {
echo "<li class='page-item active'><a class='page-link'>$counter</a></li>";
}else{
echo "<li class='page-item'><a class='page-link' href='?page=$counter'>$counter</a></li>";
}
}
}
elseif($total_no_of_pages > 10){
if($page <= 4) {
for ($counter = 1; $counter < 8; $counter++){
if ($counter == $page) {
echo "<li class='page-item active'><a class='page-link'>$counter</a></li>";
}else{
echo "<li class='page-item'><a class='page-link' href='?page=$counter'>$counter</a></li>";
}
}
echo "<li class='page-item'><a class='page-link'>...</a></li>";
echo "<li class='page-item'><a class='page-link' href='?page=$second_last'>$second_last</a></li>";
echo "<li class='page-item'><a class='page-link' href='?page=$total_no_of_pages'>$total_no_of_pages</a></li>";
}
elseif($page > 4 && $page < $total_no_of_pages - 4) {
echo "<li class='page-item'><a class='page-link' href='?page=1'>1</a></li>";
echo "<li class='page-item'><a class='page-link' href='?page=2'>2</a></li>";
echo "<li class='page-item'><a class='page-link'>...</a></li>";
for ($counter = $page - $adjacents; $counter <= $page + $adjacents; $counter++) {
if ($counter == $page) {
echo "<li class='page-item active'><a class='page-link'>$counter</a></li>";
}else{
echo "<li class='page-item'><a class='page-link' href='?page=$counter'>$counter</a></li>";
}
}
echo "<li class='page-item'><a class='page-link'>...</a></li>";
echo "<li class='page-item'><a class='page-link' href='?page=$second_last'>$second_last</a></li>";
echo "<li class='page-item'><a class='page-link' href='?page=$total_no_of_pages'>$total_no_of_pages</a></li>";
}
else {
echo "<li class='page-item'><a class='page-link' href='?page=1'>1</a></li>";
echo "<li class='page-item'><a class='page-link' href='?page=2'>2</a></li>";
echo "<li class='page-item'><a class='page-link'>...</a></li>";
for ($counter = $total_no_of_pages - 6; $counter <= $total_no_of_pages; $counter++) {
if ($counter == $page) {
echo "<li class='page-item active'><a class='page-link'>$counter</a></li>";
}else{
echo "<li class='page-item'><a class='page-link' href='?page=$counter'>$counter</a></li>";
}
}
}
}
?>
<li <?php if($page >= $total_no_of_pages){ echo "class='page-item page-link disabled' style='color:black;'"; } ?>>
<a <?php if($page < $total_no_of_pages) { echo "class='page-link' href='?page=$next_page'"; } ?>>Następna</a>
</li>
<?php if($page < $total_no_of_pages){
echo "<li class='page-item'><a class='page-link' href='?page=$total_no_of_pages'>Ostatnia ››</a></li>";
} ?>
</ul>
</nav>
Then I created a search engine (input) with onkeyup="myFunction()"
and MyFunction looks:
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td") ;
for(j=0 ; j<td.length ; j++)
{
let tdata = td[j] ;
if (tdata) {
if (tdata.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
break ;
} else {
tr[i].style.display = "none";
}
}
}
}
}
My problem appears when I try to search for something – it searches only from 1 page, and from other pages it does not download results. I would like to make it search me from all pages.
Advertisement
Answer
You need to implement searching on back-end instead of front-end because you are loading only one page instead of all results.
Let’s say that your current link looks like http://localhost:8080/table?page=1
, you need to modify it so it sends value of the search input to the back-end ex. http://localhost:8080/table?page=1&s=somevalue
.
Then you need to pass that value to the SQL
script and based on the result do the pagination.