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

Question

我与我的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，但是在点击此页面时会加载所有没有过滤器的设备，即使我复制该网址并加载该页面，它成功进入第2页，包含过滤器。

然后，分页URL是完全忽略过滤器后，是/设备？ & page = 2。我想这一定是我的渲染和附加在视图中PAGINATE链接做的，但我不确定我在做什么错：

{!! $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的完美的作品

• 过滤完美的作品

• 试图过滤显示所有设备不只是过滤后去另一页即使URL是正确的，并且如果我在另一个选项卡上再次加载此URL，它也会得到正确的结果。

• 尝试转到另一个筛选结果页面后，分页链接缺少附加输入。

从这里开始调试很困难，任何能指向正确方向或尝试/测试的人都会很棒。

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

固定它