我的Laravel设置有一些冲突的问题,特别是与分页和产品过滤器。
分页和产品过滤器都是通过jQuery处理的,所以页面不会完全刷新。
这是我的jQuery分页代码,使用标准的Laravel ->分页功能。
$(function() {
$('body').on('click', '.pagination a', function(e) {
e.preventDefault();
var url = $(this).attr('href');
var page_number = $(this).attr('href').split('page=')[1];
getProducts(page_number);
window.history.pushState("", "", url);
});
function getProducts(page_number) {
$.ajax({
url : '?page=' + page_number
}).done(function (data) {
$('.devices-holder').html(data);
}).fail(function () {
alert('Data could not be loaded.');
});
}
});
这个效果很好,问题是当我们过滤产品时,然后尝试在过滤后的结果上转到另一个页面。
在过滤之后,分页链接是正确的,例如/devices/filter?filter=1&page2,但是在点击这个页面时,页面加载所有没有过滤器的设备,即使如果我复制该url并加载该页面,它也会成功地进入包含过滤器的页面2。
那么分页URL将完全忽略之后的过滤器,并且是/devices?&page=2。我认为它必须与我在视图中渲染和附加分页链接有关,但我不确定我做错了什么:
{!! $devices->appends(Input::all())->render() !!}
这是我的控制器
public function devicesByFilter(Request $request) {
$type = 'devices';
$types = Input::get('types');
$devices = Device::where('type', '=', $type)->where('approved', '=', 1);
if(!empty($types)) {
$url = 'filter';
$check = 0;
foreach($types as $deviceType) {
if($check == 0) {
$devices = $devices->where('device_type', 'LIKE', $deviceType);
} else {
$devices = $devices->orWhere('device_type', 'LIKE', $deviceType);
}
$url = $url.'&types%5B%5D='.$deviceType;
$check++;
}
}
$devices = $devices->orderBy('match_order', 'asc')->paginate(10);
$devices->setPath('filter');
if ($request->ajax()) {
return view('devices.ajax.loadfilter', ['devices' => $devices, 'type' => $type, 'types' => $types])->render();
}
return View::make('devices.all', compact('devices', 'type'));
}
这是我的过滤器jQuery代码:
$(document).ready(function () {
var types = [];
// Listen for 'change' event, so this triggers when the user clicks on the checkboxes labels
$('input[name="type[]"]').on('change', function (e) {
e.preventDefault();
types = []; // reset
if ( document.location.href.indexOf('filter') > -1 ) {
var url = '../devices/filter?type=device';
} else {
var url = 'devices/filter?type=device';
}
$('input[name="type[]"]:checked').each(function()
{
types.push($(this).val());
url = url+'&types%5B%5D='+$(this).val();
});
if ( document.location.href.indexOf('filter') > -1 ) {
$.get('../devices/filter', {type: 'devices', types: types}, function(markup)
{
$('.devices-holder').html(markup);
});
} else {
$.get('devices/filter', {type: 'devices', types: types}, function(markup)
{
$('.devices-holder').html(markup);
});
}
window.history.pushState("", "", url);
});
});
所以在一个糟糕的解释中:
滤波工作完美
尝试去过滤后的另一个页面显示所有设备不只是过滤的,即使URL是正确的,如果我加载这个URL再次在另一个选项卡,它有正确的结果。
在尝试转到另一个过滤结果页面后,分页链接缺少追加输入
从这里调试这个非常困难,任何人都可以指出正确的方向或尝试/测试的东西将是伟大的。
修改
$(function() {
$('body').on('click', '.pagination a', function(e) {
e.preventDefault();
var url = $(this).attr('href');
var page_number = $(this).attr('href').split('page=')[1];
getProducts(page_number);
window.history.pushState("", "", url);
});
function getProducts(page_number) {
$.ajax({
url : '?page=' + page_number
}).done(function (data) {
$('.devices-holder').html(data);
}).fail(function () {
alert('Data could not be loaded.');
});
}
});
$(function() {
$('body').on('click', '.pagination a', function(e) {
e.preventDefault();
var url = $(this).attr('href');
getProducts(url);
window.history.pushState("", "", url);
});
function getProducts(url) {
$.ajax({
url : url
}).done(function (data) {
$('.devices-holder').html(data);
}).fail(function () {
alert('Data could not be loaded.');
});
}
});