CODEWITHSUNDEEP
phpjqueryajaxpaginationnavigation
stefan86
stefan86

Reputation: 11

PHP/Ajax page navigation url change

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.

Upvotes: 0

Views: 75

Answers (2)

stefan86
stefan86

Reputation: 11

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;  
 ?>

Upvotes: 0

user16359337
user16359337

Reputation:

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.

Upvotes: 1

Related Questions