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.