0

Ik want to build a ajax/jquery page navigation so when the user clicks on a page, the url changes to so that there are no problems with browser's back button. I found a lot of answers for this but not what I searched for. I saw this code below on a tutorial site and I want to customize it so that the url moves to. Do I have to build that in the ajax script of on the PHP side? How can I achieve this?

My index.php

 <html>  
      <head>  
           <title>Webslesson Tutorial | Make Pagination using Jquery, PHP, Ajax and MySQL</title>  

           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           
      </head>  
      <body>  
           <br /><br />  
           <div class="container">  
                <h3 align="center">Make Pagination using Jquery, PHP, Ajax and MySQL</h3><br />  
                <div class="table-responsive" id="pagination_data">  
                </div>  
           </div>  
      </body>  
 </html>  
 <script>  
 $(document).ready(function(){  
      load_data();  
      function load_data(page)  
      {  
           $.ajax({  
                url:"pagina.php",  
                method:"POST",  
                data:{page:page},  
                success:function(data){  
                     $('#pagination_data').html(data); 
        history.pushState({ foo: 'bar' }, '', '/bank');     // I tried this line but it don't work           
                }  
           })  
      }  
      $(document).on('click', '.pagination_link', function(){  
           var page = $(this).attr("id");  
           load_data(page);  
      });  
 });  
 </script>  

And my pagina.php

<?PHP 

$connect = mysqli_connect("hidden", "hidden", "hidden","publiek2") or die("Connection failed: " . mysqli_connect_error());
$record_per_page = 50;  
 $page = '';  
 $output = '';  
 

 if(isset($_POST["page"]))  
 {  
      $page = $_POST["page"];  
 }  
 else  
 {  
      $page = 1;  
 }  
 $start_from = ($page - 1)*$record_per_page;  
 $query = "SELECT * FROM voertuigen WHERE merk='Chevrolet' AND voorpagina='1' ORDER BY model ASC LIMIT $start_from, $record_per_page";  
 $result = mysqli_query($connect, $query);  
 $output .= "  
      <table class='table table-bordered'>  
           <tr>  
                <th width='50%'>Name</th>  
                <th width='50%'>Phone</th>  
           </tr>  
 ";  
 while($row = mysqli_fetch_array($result))  
 {  
      $output .= '  
           <tr>  
                <td>'.$row["merk"].'</td>  
                <td>'.$row["model"].'</td>  
           </tr>  
      ';  
 }  
 $output .= '</table><br /><div align="center">';  
 $page_query = "SELECT * FROM voertuigen WHERE merk='Chevrolet'  AND voorpagina='1' ORDER BY model ASC";  
 $page_result = mysqli_query($connect, $page_query);  
 $total_records = mysqli_num_rows($page_result);  
 $total_pages = ceil($total_records/$record_per_page);  

 for($i=1; $i<=$total_pages; $i++)  
 {  
  
  $output .= "<span class='pagination_link' style='cursor:pointer; padding:6px; border:1px solid #ccc;' id='".$i."'>".$i."</span>";  
 }  
 $output .= '</div><br /><br />';  
 echo $output;  
 ?>  

Thanks in advance.

I've tried to customize the ajax script.

2 Answers 2

1

As a javascript and PHP developer I don't understand much about Jquery but I think the code describes that there is a div called.pagination_link takes id as page number eg: 1. And makes an HTTP POST request to the PHP side. You can simply do this with a sample example in Javascript.

HTML <div id="1" classname="pagination_link">1</div>

Javascript

const id = document.querySelector('.pagination_link').getAttribute('id');
fetch('pagina.php', {
 method : 'POST',
 body : id
})

If you want to send data.

3
  • Yes, this is the line with pagination_link. $output .= "<span class='pagination_link' style='cursor:pointer; padding:6px; border:1px solid #ccc;' id='".$i."'>".$i."</span>"; I see your solution with the fetch but can you help my with that? Where do I place it and how do I get the results?
    – stefan86
    Jan 6 at 20:30
  • You can add this fetch in script tags instead of ajax or external resource. Then if it is a post method you can test if this feature working and then you can write HTTP request data in PHP.
    – user16359337
    Jan 6 at 20:43
  • This short code from the big script I modified some. I tried this: function load_data(page) { $.ajax({ url:"pagina.php", method:"POST", data:{page:page}, success:function(data){ $('#pagination_data').html(data); const id = document.querySelector('.pagination_link').getAttribute('id'); fetch('pagina.php', { method : 'POST', body : id }) alert(id); } }) } Every page it alerts 1
    – stefan86
    Jan 6 at 20:49
0

I added a hidden text value with the page number as value and called the id 'idd' and recalled that id on the ajax page. It works good now but if I want to go back with browser button, the url moves to the previous page but the results on the page stays te same. How can I resolve that?

My new index.php JS code

 <script>  
 $(document).ready(function(){ 

var idd;

      load_data();  
      function load_data(page)  
      {  
           $.ajax({  
                url:"pagina.php",  
                method:"GET",  
                data:{page:page},  
                success:function(data){  
                     $('#pagination_data').html(data); 

        
            if (idd === undefined) {
    
    alert("ja");
    idd = 1;
    alert(idd);
                history.pushState({}, '', 'http://localhost:4612/pagina/1');
    
}
else {
    
    idd = $("#idd").val();
    history.pushState({}, '', 'http://localhost:4612/pagina/'+idd);
}
               }  
           })  
      }  
      $(document).on('click', '.pagination_link', function(){  
           var page = $(this).attr("id");  
           load_data(page);  
      });  
 });  
 </script>  

and my altered pagina.php

<?PHP 

$connect = mysqli_connect("hidden", "hidden", "hidden","publiek2") or die("Connection failed: " . mysqli_connect_error());
$record_per_page = 50;  
 $page = '';  
 $output = '';  
 


 if(isset($_GET["page"]))  
 {  
      $page = $_GET["page"];  
      echo "<input type='hidden' id='idd' value='".$_GET['page']."'>";
 }  
 else  
 {  
      $page = 1; 
$idd = 1;     
 }  
 $start_from = ($page - 1)*$record_per_page;  
 $query = "SELECT * FROM voertuigen WHERE merk='Chevrolet' AND voorpagina='1' ORDER BY model ASC LIMIT $start_from, $record_per_page";  
 $result = mysqli_query($connect, $query);  
 $output .= "  
      <table class='table table-bordered'>  
           <tr>  
                <th width='50%'>Name</th>  
                <th width='50%'>Phone</th>  
           </tr>  
 ";  
 while($row = mysqli_fetch_array($result))  
 {  
      $output .= '  
           <tr>  
                <td>'.$row["merk"].'</td>  
                <td>'.$row["model"].'</td>  
           </tr>  
      ';  
 }  
 $output .= '</table><br /><div align="center">';  
 $page_query = "SELECT * FROM voertuigen WHERE merk='Chevrolet'  AND voorpagina='1' ORDER BY model ASC";  
 $page_result = mysqli_query($connect, $page_query);  
 $total_records = mysqli_num_rows($page_result);  
 $total_pages = ceil($total_records/$record_per_page);  

 for($i=1; $i<=$total_pages; $i++)  
 {  
  
  $output .= "<span class='pagination_link' style='cursor:pointer; padding:6px; border:1px solid #ccc;' id='".$i."'>".$i."</span>";  
 }  
 $output .= '</div><br /><br />';  
 echo $output;  
 ?>  

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.