Ajax paginator with custom filters - ajax

Question

I'm successfully adopted this guide: https://laraget.com/blog/how-to-create-an-ajax-pagination-using-laravel to my needs, it works, but pagination won't work if i apply my custom filters.
Let's start with routes/web.php:
// products routes
Route::get('products', 'ProductController#index')->name('CatalogIndex');
// sorting products with custom filters
Route::post('products', 'ProductController#Filters');
Then we're going to ProductController.php:
public function index(Request $request)
{
$products = Product::orderBy('created_at', 'desc')->paginate(12);
if ($request->ajax()) {
$products_view = view('includes.products', compact('products'))->render();
return response()->json(compact('products_view'));
}
return view('catalog.index', compact('products', 'power', 'area', 'source'));
}
// filtering products
public function Filters(Request $request, Product $product)
{
if ($request->ajax()) {
// using query builder here
$prods = $product->newQuery();
// sorting by price
if ($request->has('order')) {
if ($request->input('order') == 'default') {
$prods->orderBy('created_at', 'desc');
} else {
$prods->orderBy('price', $request->input('order'));
}
}
// more filters omitted for readability
$products = $prods->paginate(12);
$products_view = view('includes.products', compact('products'))->render();
return response()->json(compact('products_view'));
}
return abort(403, 'Unauthorized action.');
}
Some javascript, that makes these filters work:
$('body').on('click', '.pagination a', function(e) {
e.preventDefault();
var url = $(this).attr('href');
getProducts(url);
window.history.pushState("", "", url);
});
function getProducts(url) {
$.ajax({
method: 'get',
url: url,
success: function(data) {
$('#products').html(data.products_view);
console.log(data);
},
error: function(jqxhr, status, exception) {
console.log('Error' + exception);
}
});
}
Now is the question, normal pagination with ajax works just fine, if i don't apply any filter, but if apply the filter (select all products where power source equal to something, etc), then when i click on a pagination link, it just leads to my index method of ProductController on 2nd page ignoring my filters, also url changes to "products?page=2", i expect the following behavior -> when you apply source filter == somevalue, then clicking on 2nd page, it would display 2nd page of all products with applied source filter, now it shows just index method with simple sorting by created_at column.

Answer 1

You need:
on the blade partial appends the adicional parameters on the paginator like this:
{!! $products->appends(['param1' => 'val1', 'param2'=>'val2'])->links() !!}
And on your method index() do that:
if ($request->ajax()) {
return $this->filters($request, $product);
}
Good luck.

Answer 2

Your http methods are mismatched. Try changing your route to a "get" instead of "post" and see if that fixes it

Answer 3

Ended using query strings and switched to GET method.