Question

我的Laravel设置存在一些冲突问题，尤其是分页和产品过滤器。

分页和产品过滤器都是通过jQuery处理的，因此页面无法完全刷新。

这是我的jQuery分页代码，使用标准的Laravel - ＆gt; paginate功能。

 $(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＆amp; page2，但是点击这个页面加载所有没有过滤器的设备，即使我复制了该URL并加载该页面，它成功地转到第2页，包括过滤器。

然后，paginate URL完全忽略了过滤器，并且是/ devices？＆amp; 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); 
});

}）;

所以很难澄清：

分页jQuery完美无缺
过滤效果很好
尝试在过滤后转到另一个页面会显示所有设备，而不仅仅是已过滤的设备，即使网址正确，如果我在另一个标签上再次加载此网址，也会显示正确的结果。
< / LI>
尝试转到另一页过滤结果后，分页链接缺少附加输入。

从这里调试这个是非常困难的，任何可以指向正确方向或尝试/测试的人都会很棒。

Answer 1

通过更改

来修复它

 $(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.');
        });
    }
});

Laravel jQuery - 分页和产品过滤器，分页URL

1 个答案: