首页 > 解决方案 > 在分页期间保持 PHP/AJAX 过滤器选择

问题描述

我有一个页面,允许您使用工作正常的 AJAX 调用过滤结果,我添加了最初工作正常的分页,但是一旦您移动到另一个页面,复选框就会变为未选中状态,它只会再次显示所有结果。我认为这是因为页面移动到第 2 页时正在重新加载,有没有办法保持过滤器设置设置并继续显示过滤器 AJAX 的结果。当没有选择过滤器时,分页显然可以正常工作,但我的大脑似乎没有工作并且无法解决这个问题。任何帮助,将不胜感激!

我的代码在下面,我也知道目前我的代码对 sql 注入是开放的,但只是试图让一切正常工作,然后再返回:

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


    
?>

标签: phpjqueryajaxfilterpagination

解决方案


你可以通过几种方式做到这一点。一种是将过滤器添加到过滤器函数末尾的每个页面链接的 GET URI 参数中,并在运行 POST 请求之前添加代码,如果参数存在于 URI 中,则将过滤器标记为已选择/已检查。另一种是更改代码,以便使用相同的 POST 请求完成分页,而不是实际导航到新的 URL。


推荐阅读