Holding PHP/AJAX filter selections during pagination

Viewed 60

I have a page which allows you to filter results using an AJAX call which works fine, I have added pagination which work fine initially but as soon as you move to another page, the checkbox becomes unchecked and it just shows all results again. I assume this is because the page is reloading when it moves to page 2, is there a way of keep the filter setting set and continue to show the results from the filter AJAX. The pagination obvisouly works fine when no filter is selected but my brain just doesn't seem to be working and can't work this out. Any help would be appreciated!

My code is below, I am also aware that currently my code is open to sql injection but just trying to get everything to work and then will go back through it:

<body>
<?php include("PHP/header.php"); ?>



<div class="container-fluid">


<div class="container" style="margin-top: 2%; text-align: center;"> 
<h1> Reviews</h1>
On This page you will find our reviews on music tech and software
<br/>
<br/>
<br/>

Filter Reviews:

<ul class="list-group">
<?php
$search = $conn->prepare("SELECT DISTINCT reviewcat FROM review_db ORDER BY reviewcat");
$search->execute(); 

while ($row = $search->fetch(PDO::FETCH_ASSOC)) {       
?>
<li class="list-group-item">
    <div class="form-check">
    <label class="form-check-label">
    <input type="checkbox" class="form-check-input product_check" value="<?=$row['reviewcat'];?>" id="reviewcat"> <?=$row['reviewcat']; ?>
    </label>
    </div>
</li>
<?php } ?>
</ul>

</div>
<br/><br/>  

<div class="row-fluid ">
    
    <h5 class="text-center" id="textChange"> All Reviews </h5>
    <hr>
    <div class="text-center">
        <img src="Images/loader.gif" id="loader" width="100" style="display: none">
    </div>
     <?php
    if (isset($_GET['pageno'])) {
            $pageno = $_GET['pageno'];
        } else {
            $pageno = 1;
        }
        $no_of_records_per_page = 8;
        $offset = ($pageno-1) * $no_of_records_per_page;
        
        
        // Prev + Next
                
        
        $prev = $pageno - 1;
        $next = $pageno + 1;     
    ?>
        
    
    <div id="result" class="card-deck card_group_style pt-4" >
     <?php
         
        
        
        $stmt = $conn->prepare("SELECT COUNT(*) FROM review_db");
        $stmt->execute();
        
        $total_rows = $stmt->fetchColumn();
        $total_pages = ceil($total_rows / $no_of_records_per_page);
        
        
        $result = $conn->prepare("SELECT * FROM review_db ORDER BY reviewsub DESC LIMIT $offset, $no_of_records_per_page ");
        $result->execute();
        
    
           
    ?>    
    
    
    <?php while ($row = $result->fetch(PDO::FETCH_ASSOC)) {// Important line !!! Check summary get row on array .. ?>
   
   <?php
          $my_date = $row['reviewsub'];
            $date = DATE("d/m/Y",strtotime($my_date));
    ?>

<div class="col-sm-6 col-lg-3 py-2">
    
<div class="card mb-4">
        
        
    
  <img class="card-img-top card-images " src="Images/Reviews/<?php echo $row['reviewimage1'];?>" alt="<?php echo $row['reviewtitle'];?>" >
  <div class="card-body">
    <h5 class="card-title"><?php echo $row['reviewtitle'];?></h5>
    <p class="card-text"><?php echo $row['reviewsynop'];?></p>
    

    
    <a href="Reviews/review-content.php?id=<?php echo $row['id'];?>&reviewtitle=<?php echo $row['reviewtitle'];?>" class="btn btn-primary my-4" >Read More</a>
    <div class="card-footer" style="padding: 1%;">
      <small class="text-muted">Submitted: <?php echo $date; ?></small>
    </div>
  </div>
  
 
</div> 
</div>
   
    
    
    
    <?php } ?>
    
     
    
     </div>
     
     <div class="container">
<!-- Pagination Controller -->

    <?php
        if($total_pages <= 1){
            
            $hidepage = 'none'; 
            
        }else{
            
            $hidepage = 'flex';
        }
    ?>  


    <ul class="pagination justify-content-center pagination-mb" style="display: <?php echo $hidepage; ?>">
        
    <li><a class="page-link" href="?pageno=1">First</a></li>
     
    <li class="page-item <?php if($pageno <= 1){ echo 'disabled'; } ?>">
        <a class="page-link" href="<?php if($pageno <= 1){ echo '#'; } else { echo "?pageno=".($pageno - 1); } ?>">Prev</a>
    </li>
    
    
    <?php for($i = 1; $i <= $total_pages; $i++ ): ?>
        <li class="page-item <?php if($pageno == $i) {echo 'active'; } ?>">
            <a class="page-link" href="?pageno=<?= $i; ?>"> <?= $i; ?> </a>
        </li>
        <?php endfor; ?>
    
    
    
    
    <li class="page-item <?php if($pageno >= $total_pages){ echo 'disabled'; } ?>">
        <a class="page-link" href="<?php if($pageno >= $total_pages){ echo '#'; } else { echo "?pageno=".($pageno + 1); } ?>">Next</a>
    </li>
    
    <li><a class="page-link" href="?pageno=<?php echo $total_pages; ?>">Last</a></li>
        
    </ul>



<!-- Pagination end -->
</div>

    
</div>



    
  
   


    </div>
    
</div>
<?php include("PHP/footer.php"); ?>

</div>

</body>

 <?php include("PHP/js.php"); ?>

<script>
$(document).ready(function(){
 $('#link-review,#link-footer-review').addClass('active');
});
</script>
<script type="text/javascript">
    $(document).ready(function(){
        
        function get_filter_text(text_id){
            var filterData = [];
            $('#'+text_id+':checked').each(function(){
                filterData.push($(this).val());
            });
            return filterData;
        }
        
        
        
    
        
        
            $(".product_check").click(function(){
            if ($(this).prop('checked')) {  
                
                $("#loader").show();
                
                var action = 'data';
                var reviewcat = get_filter_text('reviewcat');
                
                                $.ajax({
                                    method:'POST',
                                    url:'reviewaction.php',
                                    data:{action:action,reviewcat:reviewcat},
                                    success:function(response){
                                        $("#result").html(response);
                                        $("#loader").hide();
                                        $("#textChange").text("Filtered Reviews");
                                    }
                    
                                    });
            } else {
        
            $("#loader").show();
                
                var action = 'data';
                var reviewcat = get_filter_text('reviewcat');
                
                                $.ajax({
                                    method:'POST',
                                    url:'reviewaction.php',
                                    data:{action:action,reviewcat:reviewcat},
                                    success:function(response){
                                        $("#result").html(response);
                                        $("#loader").hide();
                                        $("#textChange").text("All Reviews");
                                    }
                    
                                    });
        
    }

            
        });
        
        
        
    });
</script>

reviewaction.php:

<?php
    
    if(isset($_POST['action'])){
        
        if (isset($_GET['pageno'])) {
            $pageno = $_GET['pageno'];
        } else {
            $pageno = 1;
        }
        $no_of_records_per_page = 8;
        $offset = ($pageno-1) * $no_of_records_per_page;
        
        
        // Prev + Next
                
        
        $prev = $pageno - 1;
        $next = $pageno + 1;
        
        
        $checksql = "SELECT COUNT(*) FROM review_db WHERE reviewcat !=''";
        $sql = "SELECT * FROM review_db WHERE reviewcat !=''";
        
        
        if(isset($_POST['reviewcat'])){
            $reviewcat = implode("','", $_POST['reviewcat']);
            $checksql .="AND reviewcat IN('".$reviewcat."')";
            $sql .="AND reviewcat IN('".$reviewcat."')";
        }
            
        $resultpag = $conn->prepare($checksql);
        $resultpag->execute();
        
        $total_rows = $resultpag->fetchColumn();
        $total_pages = ceil($total_rows / $no_of_records_per_page);
        
        $sql .="ORDER BY reviewsub DESC LIMIT $offset, $no_of_records_per_page "; 
        
        
        $result = $conn->prepare($sql);
        $result->execute();
        
        $output='';
        
        if (count($result) > 0) {
            
            
            while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
                
            $my_date = $row['reviewsub'];
            $date = DATE("d/m/Y",strtotime($my_date));
                
                $output .= '
                
                
                <div class="col-sm-6 col-lg-3 py-2">
    
                <div class="card mb-4">
                        
                        
                    
                  <img class="card-img-top card-images" src="Images/Reviews/'.$row['reviewimage1'].'" alt="'.$row['reviewtitle'].'" >
                  <div class="card-body">
                    <h5 class="card-title">'.$row['reviewtitle'].'</h5>
                    <p class="card-text">'.$row['reviewsynop'].'</p>
                    
                
                    
                    <a href="Reviews/review-content.php?id='.$row['id'].'&reviewtitle='.$row['reviewtitle'].'" class="btn btn-primary my-4" >Read More</a>
                   
                     <div class="card-footer" style="padding: 1%;">
                      <small class="text-muted">Submitted: '.$date.'</small>
                    </div>

                  
                 
                </div> 
                </div>
                </div>
                
                
                
                ';
                    } //While Loop End
                    
                    
        
                
                
        
        }else{
            $output = "<h3>No Reviews Found!</h3>";
        }

        
        
        
        
        
                
    
    echo $output;
    } 


    
?>
1 Answers

You can do it a couple of ways. One is to add the filter to the GET URI parameters of each page link at the end of your filter function, and add code that marks the filters as selected/checked if the parameters exist in the URI before running the POST request. The other is to change the code so that pagination is done with the same POST request instead of actually navigating to a new URL.

Related