繁体   English   中英

如何使用 ajax 和 PHP 使分页与过滤器一起使用

[英]How can I get pagination to work with filter using ajax and PHP

我允许用户从下拉列表和滑块的选择列表中过滤数据。 我让过滤部分正常工作并正确显示数据,问题是当我尝试对数据进行分页时。 我使用 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;
}

抱歉,这篇文章太长了,我认为代码越多,人们就越容易理解我要完成的任务。 或者指导我使用正确的方法来做到这一点。 再次感谢您的时间和耐心。 :)

您可以使用隐藏字段并将过滤器值存储在隐藏字段中,并且在分页时您可以从隐藏字段中获取值,并传递给分页代码。

例如:我们有两个隐藏字段

<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();

并将城市,状态传递给分页。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM