Laravel AJAX - 记住多个选择的过滤器

时间:2017-09-30 18:25:29

标签: javascript php jquery ajax laravel

过去几周我一直试图解决这个问题。我不能只是抓住它。

在我的网页上,我总共有四个过滤器:一个搜索,按年过滤,按发布网站过滤,按国家/地区过滤。这些过滤器可以完美地完成。他们设法快速过滤我的数据库并返回我需要的结果。

问题在于,如果应用一个过滤器然后决定应用另一个过滤器,则会重置第一个过滤器。我正在进行的AJAX调用,根本没有能力记住我应用的第一个过滤器是什么。根据我的研究,我发现我需要以某种方式保存用户选择的过滤器并使用按钮或其他东西来应用它们。我认为这将是实现这一目标的最简单方法。

基本上,我们想要实现的是允许用户选择多个过滤器,而不会让第一个过滤器重置。

这是我目前用于AJAX调用的代码:

$(document).ready(function() {
  $('#filter-type').select2();
  $('#filter-year').select2();
  $('#filter-pad').select2();
  $('#search').on('keyup', function() {
    $value = $(this).val();
    delay(function() {
      if ('#search'.length > 3) {
        $.ajax({
          type: 'get',
          url: '{{$operatorname->spadoc_cd}}',
          data: {
            'search': $value
          },
          success: function(data) {
            $('#data-holder').html(data);
          }
        });
      }
    }, 300);
  });
  $("#filter-pad").change(function() {
    $value = $(this).val();
    $.ajax({
      type: "get",
      url: "{{$operatorname->spadoc_cd}}",
      data: {
        'search': $value,
        type: 'site'
      },
      success: function(data) {
        $('#data-holder').html(data);
      }
    });
  });
  $("#filter-type").change(function() {
    $value = $(this).val();
    $.ajax({
      type: "get",
      url: "{{$operatorname->spadoc_cd}}",
      data: {
        'search': $value,
        type: 'object_type'
      },
      success: function(data) {
        $('#data-holder').html(data);
      }
    });
  });
  $("#filter-year").change(function() {
    $value = $(this).val();
    $.ajax({
      type: "get",
      url: "{{$operatorname->spadoc_cd}}",
      data: {
        'search': $value,
        type: 'launch_year'
      },
      success: function(data) {
        $('#data-holder').html(data);
      }
    });
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

if ($request->ajax())
    {
        $output="";
        $operatorsatellite = DB::table('satellites')
            ->where(function($q) use ($request) {
                if(empty($request->type) && empty($request->rocket_type)) {
                    $q->orWhere('satname','LIKE','%'.$request->search.'%')
                        ->orWhere('norad_cat_id','LIKE','%'.$request->search.'%')
                        ->orWhere('country','LIKE','%'.$request->search.'%')
                        ->orWhere('object_id','LIKE','%'.$request->search.'%');
                } else {
                    if(!empty($request->type)) {
                        $q->orWhere($request->type,'LIKE','%'.$request->search.'%');
                    }
                    if(!empty($request->site)) {
                        $q->orWhere('site','LIKE','%'.$request->site.'%');
                    }
                    if(!empty($request->object_type)) {
                        $q->orWhere('object_type','LIKE','%'.$request->object_type.'%');
                    }
                    if(!empty($request->launch_year)) {
                        $q->orWhere('launch','LIKE','%'.$request->launch_year.'%');
                    }
                }
            })
            ->where('country', $spadoc_cd)->Paginate(700);
        if ($operatorsatellite)
        {
            foreach ($operatorsatellite as $key => $operatorsatellites) {
            $output .='<div class="table-row" id="launchsatdisplay">'.
                    '<div class="satname">'.'<a href=/satellite/'."$operatorsatellites->norad_cat_id".'>'.$operatorsatellites->satname.'</a>'.'</div>'.
                    '<div>'.'<div class="satnumbers">'.'<span>'.$operatorsatellites->norad_cat_id.'</span>'.'<span>'.$operatorsatellites->object_id.'</span>'.'</div>'.'</div>'.
                    '<div>'.$operatorsatellites->object_type.'</div>'.
                    '</div>';
            }
        }
        return $output;
    }
    else {
        $operatorsatellite = DB::table('satellites')->Paginate(50);
        return view('pages/operator-filter', compact('operators', 'operatorsatellite', 'searchsite', 'searchyear', 'searchtype'));
    }

1 个答案:

答案 0 :(得分:2)

我更新了我的答案,因为它不是最好的方法而且根本不正确。 首先,您可以在GET数据中发送过滤器(在您的情况下,使用会话会更明智),在您的ajax调用中添加过滤器作为参数(如果选择或键入它们,取决于您的输入)这样的东西

data: {
   'filter-1': $('.myInput1').val(), // take value from filter 1 and send them as get params
   'filter-2': $('.myInput2').val(), // take value from filter 2 and send them as get params
   // ...........
}

所以你的网址应该是这样的mydomain.me/myurl?search=someValue?filter-1=somevalue1&filter-2=somevalue2

如果您想更新每个选择更改的数据,也可以从其他过滤器中获取值,这样它们就不会丢失,例如

 $("#filter-type").change(function() {
$value = $(this).val();
$value2 = $('otherFilter2').val();
$value3 = $('otherFilter3').val();
$.ajax({
  type: "get",
  url: "{{$operatorname->spadoc_cd}}",
  data: {
    'search': $value,
    'filter2' $value2,
    'filter3' $value3,
  // other code ....

因此,您可以从此网址获取过滤器并在查询中使用它们。

然后检查你的php代码中是否存在值

if(!empty($request->filter-1)) {
   $q->orWhere('someData','LIKE','%'.$request->filter1.'%');
}

并在其他人身上做同样的事情。当然你可以使用会话,但没有必要这样做,发送数据作为GET参数将更容易和更好的方式