How to use pagination with ajax request

0

I'm trying to set up pagination under laravel on a page that contains a lot of data that can be filtered via ajax request.

When I go on the page without filtering the pagination works without problems. But when I put filters in place only the first page displays the good data. The following pages return unfiltered data.

My route for ajax search :

Route::post('search', [FilterController::class, 'filtercentre'])->name('filter.centre');

My Filtercontroller

public function filtercentre(Request $request) {
$centres = Centre::where('statut', 'Publié')->with('region', 'dept', 
'photocentre', 'themes')
->inRandomOrder()
    ->with('media')

    ->paginate(4);
if ($request->ajax()) {

   return view('frontend.includes.resultcategoriecentre', ['centres' => $centres])->render();

 }


return View('frontend.includes.resultcategoriecentre', compact('centres'));

}

My ajax JS

$(function(){

    $('#search').on('submit',function(e){

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        e.preventDefault(e);

        $.ajax({

            type:"POST",
            url:'/search',
            data:$(this).serialize(),
            dataType: 'html',
            success: function(data){
             ///   console.log(data);
                $( "#submit" ).prop( "disabled", false );
                $( "#submit2" ).prop( "disabled", false );
                $('#result').empty();
                $('#result').html(data);



            },
            error: function(data){
                $( "#submit" ).prop( "disabled", false );
                $( "#submit2" ).prop( "disabled", false );
            }
        })
    });
});

Filter controller send a template frontend.includes.resultcategoriecentre with

<div id="result">my result</div>

And on the page i have include frontend.includes.resultcategoriecentre and i refresh it with .html function.

via Chebli Mohamed