是否可以使用jQuery过滤已经获取的数据 [英] Is it possible to filter already fetched data with jQuery
本文介绍了是否可以使用jQuery过滤已经获取的数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用Laravel框架并获取数据。现在我试图用Ajax和jQuery过滤数据。但是我面临的一个问题是......
I am using the Laravel framework and fetching data. Now I am trying to filter the data with Ajax and jQuery. But a couple problem that I am facing...
当我开始过滤时，有此错误循环：
When I start filter, there is this error looping:
/ var / www / html / laravel / vendor / laravel / framework / src / Illuminate / Routing / RouteCollection。 php，
line：255，
trace：[
{
file：/ var / www / html / laravel / vendor / laravel / framework /src/Illuminate/Routing/RouteCollection.php，
line：242，
function：methodNotAllowed，
class：Illuminate\Routing \RouteCollection ，
输入： - >
}，
"/var/www/html/laravel/vendor/laravel/framework/src/Illuminate/Routing/RouteCollection.php", "line": 255, "trace": [ { "file": "/var/www/html/laravel/vendor/laravel/framework/src/Illuminate/Routing/RouteCollection.php", "line": 242, "function": "methodNotAllowed", "class": "Illuminate\Routing\RouteCollection", "type": "->" },
是否有我遗漏的东西关于控制器？还是路由？谢谢你的帮助！
is there that I am missing something about the controller? or routing? Thank you for help!
Laravel控制器：
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 displayList = $('#display-wrapper ol');
var selectedOptions = {
sortbyprice: '',
rooms: '',
region: ''
};
$('html').click(function () {
console.log(selectedOptions);
});
$('a.region').on('click', function () {
var selectValue = $(this).data('value');
$('#region').text(selectValue);
selectedOptions.region = selectValue;
fetchDataFromServer(selectedOptions);
});
$('a.rooms').on('click', function () {
var selectValue = $(this).data('value');
$('#rooms').text(selectValue);
selectedOptions.rooms = selectValue;
fetchDataFromServer(selectedOptions);
});
$('a.sortbyprice').on('click', function () {
var selectValue = $(this).text();
selectedOptions.sortbyprice = selectValue;
fetchDataFromServer(selectedOptions);
});
function serialize(options) {
var arr = [];
for (var key in options) {
arr.push(key + '=' + options[key]);
}
return encodeURI(arr.join('&'));
}
function fetchDataFromServer(options) {
$.ajax({
type: 'POST',
url: '/home',
data: serialize(options),
success: function (response) {
if (response.error) {
console.error(response.error);
} else {
console.log(response);
updateDisplay(displayList);
}
},
error: function (html, status) {
console.log(html.responseText);
console.log(status);
}
});
}
function updateDisplay(node, data) {
var template = data.reduce(function (acc, item) {
return acc + '<li><p>Region: ' + item.region + '</p><p>Price: ' + item.price + '</p><p>Rooms: ' + item.rooms + '</p></li>';
}, '');
node.empty();
node.append(template);
}
#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
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="filter-wrapper">
<ul>
<li><a class="sortbyprice" href="javascript:" data-value="sortbyprice">Cheapest</a></li>
<li class="dropdown">
<a href="#" id="rooms">間取り</a>
<ul class="init" name="rooms">
<li><a class="rooms" href="javascript:" data-value="1DK">1DK</a></li>
<li><a class="rooms" href="javascript:" data-value="2LDK">2LDK</a></li>
<li><a class="rooms" href="javascript:" data-value="3LDK">3LDK</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" id="region">エリア</a>
<ul class="init" name="region">
<li><a class="region" href="javascript:" data-value="関西">関西</a></li>
<li><a class="region" href="javascript:" data-value="関東">関東</a></li>
<li><a class="region" href="javascript:" data-value="北海道">北海道</a></li>
</ul>
</li>
</ul>
</div>
<div id="display-wrapper">
<ol></ol>
</div>
推荐答案
主要思想是创建一个变量来存储用户选择的所有选项，并在每个ajax请求中，将相应的数据发送到服务器以获得过滤结果。
The main idea is to create a variable to store all the options selected by the user, and on each ajax request, you send the corresponding data to the server in order to get the filtered result.
我删除了隐藏的HTML表单，并选择使用对象。
I removed the hidden HTML form, and choose to use an object instead.
此代码段中的ajax请求无法正常工作，因为有没有端点'/ home'供我获取资源，但我认为这可以在你的机器上运行。
The ajax request in this code snippet is not working because there is no end-point '/home' for me to get the resources, but I think this will work on your machine.
作为旁注，id属性应该是独特的，否则，行为可能不是你所期望的。对于onclick处理程序，如果你有很多下拉菜单，你应该考虑使用循环而不是像我一样复制和粘贴来生成它们，但是出于演示目的，我将暂时保留它。
As a side note, the id attribute should be unique, or else, the behavior might not be what you'd expected. And for the onclick handlers, if you have a lot of dropdowns, you should consider generating them with a loop instead of copy and pasting like I did, but for demo purposes, I will leave it as it is for now.
// a sample display
var displayList = $('#display-wrapper ol');
// create an object to store the selected options
var selectedOptions = {
sortbyprice: '',
rooms: '',
region: ''
};
// this event handler is for logging out the selectedOptions
// so that you can see what happens to the variable
// you should remove this in production
$('html').click(function () {
console.log(selectedOptions);
});
$('a.region').on('click', function () {
// I guess what you're trying to do here is to update the dropdown
// text into the selected value, e.g replace エリア with 関西
var selectValue = $(this).data('value');
$('#region').text(selectValue);
selectedOptions.region = selectValue;
fetchDataFromServer(selectedOptions);
});
$('a.rooms').on('click', function () {
var selectValue = $(this).data('value');
$('#rooms').text(selectValue);
selectedOptions.rooms = selectValue;
fetchDataFromServer(selectedOptions);
});
$('a.sortbyprice').on('click', function () {
// var selectValue = $(this).text();
// selectedOptions.sortbyprice = selectValue;
selectedOptions.sortbyprice = 'asc';
fetchDataFromServer(selectedOptions);
});
function fetchDataFromServer(options) {
$.ajax({
type: 'GET',
url: '/home',
data: options,
success: function (response) {
if (response.error) {
// sweetAlert("Oops...", response.data, "error");
console.error(response.error);
} else {
console.log(response);
// I assume the data structure of the response is something like
// var reponse = {
// data: [
// {
// price: 123,
// rooms: '1DK',
// region: '関西'
// },
// ......
// ]
// }
// This is an example function for updating the UI
// You can replace this function according to your needs
updateDisplay(displayList, response.data);
}
},
error: function (html, status) {
console.log(html.responseText);
console.log(status);
}
});
}
function updateDisplay(node, data) {
// build the html for the node(<ol> tag)
var template = data.reduce(function (acc, item) {
return acc + '<li><p>Region: ' + item.region + '</p><p>Price: ' + item.price + '</p><p>Rooms: ' + item.rooms + '</p></li>';
}, '');
// add the template to the node(<ol> tag)
node.empty();
node.append(template);
}
#filter-wrapper {
margin-top: 15px
}
/*
* I added this line for demo purpose
* Not sure whether you'll need this in your app
* Feel free to remove this
*/
#filter-wrapper::after {
content: '';
clear: both;
display: block;
}
#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
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="filter-wrapper">
<ul>
<li><a class="sortbyprice" href="javascript:" data-value="sortbyprice">Cheapest</a></li>
<li class="dropdown">
<a href="#" id="rooms">間取り</a>
<ul class="init" name="rooms">
<li><a class="rooms" href="javascript:" data-value="1DK">1DK</a></li>
<li><a class="rooms" href="javascript:" data-value="2LDK">2LDK</a></li>
<li><a class="rooms" href="javascript:" data-value="3LDK">3LDK</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" id="region">エリア</a>
<ul class="init" name="region">
<li><a class="region" href="javascript:" data-value="関西">関西</a></li>
<li><a class="region" href="javascript:" data-value="関東">関東</a></li>
<li><a class="region" href="javascript:" data-value="北海道">北海道</a></li>
</ul>
</li>
</ul>
</div>
<div id="display-wrapper">
<ol></ol>
</div>
这篇关于是否可以使用jQuery过滤已经获取的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
