javascript - 是否可以使用 jQuery 过滤已经获取的数据
问题描述
我正在使用 Laravel 框架并获取数据。现在我正在尝试使用 Ajax 和 jQuery 过滤数据。但是我面临的几个问题......
更新 4
当我启动过滤器时,会出现以下错误循环:
"/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”: "->" },
有没有关于控制器的遗漏?还是路由?谢谢你的帮助!
Laravel 控制器:
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>
解决方案
是的你可以。这通常在服务器上完成,但如果您的数据集足够小,它可以工作。如果您将可过滤数据点设置为项目的数据元素,您只需比较过滤器中的选定值即可。jQuery 的each
函数是循环遍历元素的一种方法,然后您可以使用该data
函数访问适当的数据属性。
$('#room-filter').on('change', function() {
const numRooms = $(this).val();
$('.card').each(function() {
if (numRooms && numRooms != $(this).data('rooms')) {
$(this).slideUp();
} else {
$(this).slideDown();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Rooms:
<select id="room-filter">
<option value="">Show All</option>
<option value="1">1 Room</option>
<option value="2">2 Rooms</option>
<option value="3">3 Rooms</option>
</select>
<div class="card text-left" data-rooms="1">
<div class="card-body d-flex" id="content-card">
<h2>Shack</h2>
<p class="main-text">1 room</p>
</div>
</div>
<div class="card text-left" data-rooms="1">
<div class="card-body d-flex" id="content-card">
<h2>Second Shack</h2>
<p class="main-text">1 room</p>
</div>
</div>
<div class="card text-left" data-rooms="3">
<div class="card-body d-flex" id="content-card">
<h2>Bungalo</h2>
<p class="main-text">3 rooms</p>
</div>
</div>
推荐阅读
- mysql - 如何在mysql中创建循环行值
- angular - 元数据版本不匹配问题,当使用 Angular 8 库和 Angular 4 应用程序时
- intellij-idea - IntelliJ 没有为 org.telegram:telegrambots:4.4.0 下载文件
- javascript - 在一个变量中添加 L、geoJson 和 L.icon 并使用 L.control.layers 显示/隐藏
- flutter - 如何制作多个图像选择器,在颤动中上传和设置容器内的图像?
- android - 在 viewpager 中的开关更改上重新加载片段数据 wrt 语言
- javascript - Ajax 停止在我的控制器中处理 $POST,否则它工作正常
- angular - NaN 同时在本地存储 Angular 7 中将值转换为数字
- function - 从地图中打印出 sass 键
- python - 如何在 df=5 和 alpha=0.05 的 jupyter notebook 中绘制卡方图?