Laravel jQuery -分页和产品过滤器,分页url


Laravel jQuery - Pagination and product filters, pagination URLs

我的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.');
        });
    }
});