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