Is faceted navigation with javascript is good for SEO?

I'm currently working on a project that requires me to build some kind of filter for the list of products. I build the feature on laravel.

Website Example: www.analytics-shop.com/gb/lab-supply/lab-instruments/pumps-accessories.html?dir=asc&limit=200&order=sku

My first plan, I build it with plain blade+php. But I realized it will give bad user experience because we have to reload the page after inputs get changed.

So the second plan, I build it with ajax. The following code is just an example.

$(function() {
    $('body').on('click', '.pagination a', function(e) {
        e.preventDefault();

        $('.data li').removeClass('active');
        $(this).parent('li').addClass('active');
        var page_no=$(this).attr('href').split('page=')[1]; 
        getPosts(page_no);
        
    });

    function getPosts(page) {
       var uri={{url('paginate')}};
        $.ajax({
            url :uri+'?page=' + page,  
        }).done(function (data) {
            $('.data').html(data);  
        }).fail(function () {
            alert('Error in Loading Posts.');
        });
    }
});

This works perfectly and improve the experience. But when I accidently open the pagination link. It will show me the ajax result without CSS and also I'm afraid it would be not good for SEO. Because I make an extra code to prevent users open the URL of the pagination link directly inside the controller. I think it will block google to crawl the URL.

if($request->get('paginated')!=true){
       return redirect()->to( route('shop-product',[  'category' => $category,   'type' => $type ]));
  }

So now, I plan to load all the data and paginate them with javascript library such as list.js/pagination.js

Is this a good approach?