如何使用 ajax 和 PHP 使分頁與過濾器一起使用

Question

我允許用戶從下拉列表和滑塊的選擇列表中過濾數據。 我讓過濾部分正常工作並正確顯示數據，問題是當我嘗試對數據進行分頁時。 我使用 AJAX 將數據從表單傳遞到 PHP 過濾器腳本。 是否可以將這些值存儲在 $_SESSIONs 中，然后將這些值傳遞回過濾器以在以下頁面上顯示正確的值？

這是我目前使用的一些代碼

index.php - 我使用自定義選擇類來獲取每個表單選擇值的值並將它們發送到 jquery filterData 函數

<div class="form-group" style="padding:5px;color:#333;">
  <label for="citySelect">LOCATION</label>
  <select class="form-control custom-select citySelect" id="citySelect" data-id="<?php echo $user_id; ?>">
    <optgroup label="France">
        <option disabled selected>Select A City</option>
        <option value="paris">Paris</option>
    </optgroup>
  </select>
</div>
<div class="col-xs-6 col-sm-6">
    <div class="form-group">
        <label for="keyWordSearch">KEYWORDS</label>
        <div class="iconContainer">
            <input type="text" class="form-control keyWordSearchStyle custom-select" name="keyWordSearch" id="keyWordSearch" placeholder="keyword search...">
            <i class="fa fa-search iconPosition"></i>
        </div>
    </div>
</div>  

index.php 頁面上的 .onchange 事件將表單數據發送到 jquery 函數

$(".custom-select").on("change", function(){
    var city = $(".citySelect").val();      
    var page = 1;

    $("#refiningSearch").show();        
    filterOptionSelect(city, page);
});

然后在 jquery 函數filterOptionSelect() 中我將這些值發送到 filterData.php 頁面

function filterOptionSelect(city, page){
event.preventDefault();

var city = city;
var rate = $(".rateSelect").val();
var lowRange = $(".min").val();
var highRange = $(".max").val();
var keyword = $("#keyWordSearch").val();

$.ajax({
    type: "POST",
    url: "filterData.php",
    data: {
        "city": city,
        "rate": rate,
        "lowRange": lowRange,
        "highRange": highRange,
        "keyword": keyword,
    },
    dataType: "html",
    beforeSend: function(){
        $('.screenLoader').show();
    },
    success: function(response){
        var response = $.trim(response);
        if(response){
            setTimeout(function(){
                $('.screenLoader').fadeOut(500);
                $("#displayPage").html(response).fadeIn(2500);
            }, 800);                
          }
      }
  });
  $('.screenLoader').fadeOut(500);
 }

最后在filterData.php頁面中，我獲取所有變量並查詢它們。 問題是當我嘗試對數據進行分頁時，我不太確定如何使用新的過濾器選項更新查詢。 我將如何使用 $_SESSIONS 並將這些值返回給filterData.php以更新查詢？

過濾數據.php

這是我用來過濾數據的文件。 到目前為止，除了我的分頁外，似乎工作正常。 它只是在下一頁返回值，就像我沒有使用任何過濾器一樣。

$city = '';
$rate = '';
$lowAge = '';
$highAge = '';
$keyword = '';

$records_per_page = 6;
$starting_position = 0; 

if(isset($_POST["page"])){
     $starting_position = ($_POST["page"]-1) * $records_per_page;
}else{
    $starting_position = 1;
}
if(isset($_SESSION['city'])){
    $city = $filter->filter($_SESSION['city']); 
}else{
    if(isset($_POST['city'])){
        $city = $filter->filter($_POST['city']);
        $_SESSION['city'] = $city;
    }
}

if(isset($_SESSION['rate'])){
    $rate = $filter->filter($_SESSION['rate']);
}else{
    if(isset($_POST['rate'])){
        $rate = $filter->filter($_POST['rate']);
        $_SESSION['rate'] = $rate;
    }
}
if(isset($_SESSION['lowRange'])){
    $lowAge = $filter->filter($_SESSION['lowRange']);
}else{
    if(isset($_POST['lowRange'])){
        $lowAge = $filter->filter($_POST['lowRange']);
        $_SESSION['lowRange'] = $lowAge;
    }else{
        $lowAge == '18';
    }
}
if(isset($_SESSION['highRange'])){
    $highAge = $filter->filter($_SESSION['highRange']);
}else{
    if(isset($_POST['highRange'])){
        $highAge = $filter->filter($_POST['highRange']);
        $_SESSION['highRange'] = $highAge;
    }else{
        $highAge == '60';
    }
}
if(isset($_SESSION['keyword'])){
    $keyword = $filter->filter($_SESSION['keyword']);
}else{
    if(isset($_POST['keyword'])){
        $keyword = $filter->filter($_POST['keyword']);
        $_SESSION['keyword'] = $keyword;
    }
}


$query = "SELECT
        ads.ad_id,
        ads.ad_age,
        ads.ad_city,
        ads.ad_rate,
        ads.ad_keyword,
        ads.ad_approved,
        ads.ad_date,
        users.id,
        users.username

        FROM
            ads
        INNER JOIN
            users
        ON
            ads.ad_user = users.user_id 
        WHERE
            ads.ad_approved = '0'
    ";


if(isset($city) && !empty($city)){
    $query .= " AND ads.ad_city = :city";
}else{
    $city = '';
    $query .= " AND ads.ad_city != :city";
}

if(isset($rate) && !empty($rate)){
    if($rate == "all"){
        $query .= " AND ads.ad_rate >= 0";
    }
    else if($rate == "rate1"){
        $query .= " AND ads.ad_rate BETWEEN 0 AND 150";
    }
    else if($rate == "rate2"){
        $query .= " AND ads.ad_rate BETWEEN 151 AND 250";
    }
    else if($rate == "rate3"){
        $query .= " AND ads.ad_rate BETWEEN 251 AND 350";
    }
    else if($rate == "rate4"){
        $query .= " AND ads.ad_rate BETWEEN 351 AND 5000";
    }else{
        $query .= " AND ads.ad_rate >= 0";
    }
}

if(isset($lowAge, $highAge) && !empty($lowAge) && !empty($highAge)){
    $lowAge = $lowAge;
    $highAge = $highAge;
    $query .= " AND ads.ad_age BETWEEN :lowAge AND :highAge";
}else{
    $lowAge = 18;
    $highAge = 60;
    $query .= " AND ads.ad_age BETWEEN :lowAge AND :highAge";
}
if(isset($keyword) && !empty($keyword)){
    $query .= " AND ads.ad_content LIKE :keyword";
}else{
    $keyword = '';
    $query .= " AND ads.ad_content != :keyword";
}

$query .= " ORDER BY ads.ad_date DESC";
$queryPage = $query." LIMIT $starting_position, $records_per_page";

$stmt = $conn->prepare($queryPage);
$stmt->bindParam(":city", $city);
$stmt->bindParam(":lowAge", $lowAge);
$stmt->bindParam(":highAge", $highAge);
$stmt->bindParam(":keyword", $keyword);
$stmt->execute();
$results = $stmt->fetchAll(); 

這是分頁部分。

$stmtPage = $conn->prepare($queryPage);
$stmtPage->bindParam(":city", $city);
$stmtPage->bindParam(":lowAge", $lowAge);
$stmtPage->bindParam(":highAge", $highAge);
$stmtPage->bindParam(":keyword", $keyword);
$stmtPage->execute();
$resultsPagination = $stmtPage->fetchAll();

$total_no_of_records = $stmtPage->rowCount();

if($stmtPage->rowCount() > 0){
    $current_page = 1;
    $total_no_of_pages = ceil($total_no_of_records/$records_per_page);  

    if(isset($_POST["page"])){
       $current_page = $_POST["page"];
    }   

    ?><div class="row text-center"><ul class='pagination'><?php

    if($current_page != 1){
        $previous = $current_page - 1;            
        echo "<li><a class='boldTextLink paginationLinkPrev panelBGSHSM' data-prev-id='".$previous."'>PREVIOUS PAGE</a></li>";          
    }

    if($current_page < $total_no_of_pages){
        $next = $current_page + 1;
        echo "<li><a class='boldTextLink paginationLink panelBGSHSM' data-next-id='".$next."'>NEXT PAGE</a></li>";
    }
    ?></ul></div><?php
    $recordsTotal = $total_no_of_records;
}

抱歉，這篇文章太長了，我認為代碼越多，人們就越容易理解我要完成的任務。 或者指導我使用正確的方法來做到這一點。 再次感謝您的時間和耐心。 :)

Answer 1

您可以使用隱藏字段並將過濾器值存儲在隱藏字段中，並且在分頁時您可以從隱藏字段中獲取值，並傳遞給分頁代碼。

例如：我們有兩個隱藏字段

<input type="hidden" id="hidden_city" value="">
<input type="hidden" id="hidden_state" value="">

當您選擇城市和州時，您有兩個過濾器城市和州，您需要將城市值保存在 hidden_​​city 字段中，州值保存在 hidden_​​state 字段中。 現在隱藏的字段如下所示。

<input type="hidden" id="hidden_city" value="city1">
<input type="hidden" id="hidden_state" value="state1">

當分頁調用時，您可以傳遞上面的隱藏值，如下所示。

 var city=$("#hidden_city").val();
 var state=$("#hidden_state").val();

並將城市，狀態傳遞給分頁。