Friday, 25 January 2019

Is it possible to filter already fetched data with jQuery

I am using the Laravel framework and fetching data. Now I am trying to filter the data, is it possible to filter it with jQquery after the fetch?

@foreach($estates as $estate)
<div class="card text-left" id="main-card">
<div class="card-body d-flex" id="content-card">
        <h2></h2>
        <p class="main-text"> </p>
        <p class="main-text"> </p>
        <p class="main-text"> </p>
        <p class="main-text"> </p>
        <p class="main-text"> </p>
</div>
</div>
@endforeach

As you see, I'm iterating the columns here. But is it possible Filter these columns. Image is here

For example, filtering by price range or rooms? Filter Menu is like below. As I said I already fetched the database. And keeping the columns inside the php array which is $estates Now I am trying to filter the data...

Laravel Controller:

public function search(Request $request)
{
  $q = $request->q;
  $sortbyprice = $request->sortbyprice;
  $region = $request->region;
  $rooms = $request->rooms;
  $price = $request->price;
  $max = $request->input('max');
  $min = $request->input('min');

  $paginationData = [
      'q' => $q
  ];

  $estates = \DB::table('allestates')
      ->where('lat', '!=', '')
      ->where('lng', '!=', '')
      ->where('price', '!=', '')
      ->when($q, function($query, $q) use ($paginationData) {
          $paginationData['q'] = $q;
          return $query->where(function($query) use ($q) {
                      $query->where("building_name", "LIKE", "%" . $q . "%")
                          ->orWhere("address", "LIKE", "%" . $q . "%")
                          ->orWhere("company_name", "LIKE", "%" . $q . "%")
                          ->orWhere("region", "LIKE", "%" . $q . "%")
                          ->orWhere("rooms", "LIKE", "%" . $q . "%");
                  });
      })
      ->when($sortbyprice, function($query, $order) use ($paginationData) {
          if(!in_array($order, ['asc','desc'])) {
              $order = 'asc';
          }
          $paginationData['sortbyprice'] = $order;
          return $query->orderBy('price', $order);

      }, function($query) {
          return $query->orderBy('price');
      })
      ->when($region, function($query, $regionId) use ($paginationData) {
          $paginationData['region'] = $regionId;
          return $query->where('region', $regionId);
      })
      ->when($rooms, function($query, $roomsId) use ($paginationData) {
          $paginationData['rooms'] = $roomsId;
          return $query->where('rooms', "LIKE", "%" . $roomsId . "%");
      })
      ->when($max, function($query, $max) use ($min, $paginationData) {
          $paginationData['min'] = $min;
          $paginationData['max'] = $max;
          return $query->whereBetween('price', [$min, $max]);
      })
      // ->toSql()
      ->paginate(100);

  $paginationData = array_filter($paginationData);

  return view("home", compact('estates', 'q','paginationData'));
}

var allOptions = $('.init').children('li');
var filterOptions = {
    sortbyprice: 'asc',
    region: '',
    rooms: '',
};

$(allOptions).on('click', function () {
    var value = $(this)[0].dataset.value;
    var button = $(this).parent()[0].previousElementSibling;
    var type = $($(this).parent()[0]).attr('name');

    filterOptions[type] = value;

    $(button).text(function (idx, content) {
        var colonIndex = content.indexOf(':');
        var baseContent = content;

        if (colonIndex > -1) {
            baseContent = content.slice(0, colonIndex);
        }

        return baseContent + ': ' + value;
    });

    allOptions.slideUp();
    console.log('update filterOptions: ', filterOptions);
});

$('.dropdown').on('mouseenter', function () {
    allOptions.css('display', 'block');
});


console.log('initial filterOptions: ', filterOptions);
#filter-wrapper {
    margin-top: 15px
}

#filter-wrapper ul {
    list-style: none;
    position: relative;
    float: left;
    margin: 0;
    padding: 0
}

#filter-wrapper ul a {
    display: block;
    color: #333;
    text-decoration: none;
    font-weight: 700;
    font-size: 12px;
    line-height: 32px;
    padding: 0 15px;
    font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
}

#filter-wrapper ul li {
    position: relative;
    float: left;
    margin: 0;
    padding: 0
}

#filter-wrapper ul li.current-menu-item {
    background: lightblue;
}

#filter-wrapper ul li:hover {
    background: #f6f6f6
}

#filter-wrapper ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    padding: 0
}

#filter-wrapper ul ul li {
    float: none;
    width: 200px
}

#filter-wrapper ul ul a {
    line-height: 120%;
    padding: 10px 15px
}

#filter-wrapper ul ul ul {
    top: 0;
    left: 100%
}

#filter-wrapper ul li:hover>ul {
    display: block
}
<div id="filter-wrapper">
            <ul>
              <li name="sortbyprice" class="current-menu-item"><a href="#">Cheapest</a></li>
                <li class="dropdown">
                    <a href="#" id="rooms">Rooms</a>
                    <ul class="init" name="rooms">
                        <li data-value="1DK"><a href="#">1DK</a></li>
                        <li data-value="2LDK"><a href="#">2LDK</a></li>
                        <li data-value="3LDK"><a href="#">3LDK</a></li>
                        <li data-value="3LDK"><a href="#">4LDK</a></li>
                    </ul>
                </li>

                <li class="dropdown">
                    <a href="#" id="region">Area</a>
                    <ul class="init" name="region">
                        <li data-value="関西"><a href="#">Osaka</a></li>
                        <li data-value="関東"><a href="#">Tokyo</a></li>
                        <li data-value="北海道"><a href="#">Hokkaido</a></li>
                    </ul>
                </li>
            </ul>
          </div>


from Is it possible to filter already fetched data with jQuery

No comments:

Post a Comment