Search result from other pages

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 &rsaquo;&rsaquo;</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.

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.