如何使用ajax和PHP使用分页来使用过滤器

时间:2019-12-10 03:00:22

标签: php jquery

我允许用户从下拉列表和滑块的选择列表中过滤数据。我的过滤部分正常工作并正确显示数据,问题是当我尝试对数据进行分页时。我正在使用AJAX将数据从表单传递到PHP过滤器脚本。是否可以将这些值存储在$ _SESSIONs中,然后将这些值传递回过滤器以在以下页面上显示正确的值?

这是我当前正在使用的一些代码

index.php - 我正在使用 custom-select 类获取每个表单选择值的值,并将其发送到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 来更新查询?

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

很抱歉,因为篇幅如此长,我认为代码越多,有人就能更好地理解我要完成的工作。或指导我执行此操作的正确方法。 再次感谢您的时间和耐心等待。 :)

1 个答案:

答案 0 :(得分: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();

并通过城市,州进行分页。