symfony filter with ajax and knpPaginatorBundle

Question

I use ajax to filter data returned.
In backend, I use Symfony and KnpPaginatorBundle.

now when I display data and pagination without filter and it works and when I click on page 2 in pagination.

For example, it works also but when I filter with ajax also is work but when I click in button 2 in pagination it move to page 2 of pagination without filter

For example if I filter with name = "david" data returned is true and display is true but when I click in page 2 for pagination I move to page 2 without filter (i get data for page 2 without filter)

code sf:

    /**
                 * @Route({
                 *     "fr": "/list",
                 *     "de": "/list",
                 *     "en": "/list"
                 * } , options = { "expose" = true } , name="front.babysitter.list", methods={"GET"})
                 *
                 * @param Request $request
                 */
                public function list(Request $request){
                    $this->urls_intl = $this->getCurrentUrl("front.babysitter.list",[]);
                    $form = $this->createForm(BabySitterFrontSearchType::class, null);

                    if(empty($request->query->all())){
                        $listBabySitters = $this->babySitterRepository->findBy(['status' => 1]);
                    } else {
                        $listBabySitters = $this->babySitterRepository->findBabySitter($request->query->get("babysitter_search"));
                    }

                    $listBabySittersPaginate  = $this->paginator->paginate(
                        $listBabySitters,
                        $request->query->get('page', 1),
                        $this->paginate
                    );

                    return $this->render('babysitter/list.html.twig',[
                        'listBabySitters' => $listBabySittersPaginate,
                        'form' => $form->createView()
                    ]);
                }

code repository:

    public function findBabySitter($searchQuery, $distance = 10): array
                {
                    $query = $this->createQueryBuilder('b')
                        ->where('b.status = 1');

                    if (isset($searchQuery['spokLanguage']) && $searchQuery['spokLanguage']){
                        $query
                            ->join('b.spokLanguages','sp')
                            ->andWhere('sp.language in ( :language_id )')
                            ->setParameter('language_id', $searchQuery['spokLanguage'])
                        ;
                    }
}

//just example for filter

code js:

    var searchBabySitters = function(){
            $("#ajax-form-search-babysitter").on('submit', function () {
                $('.loading').show();
                history.pushState(null, null, window.location.href+'?'+$('#ajax-form-search-babysitter').serialize());

                $.ajax({
                    url: Routing.generate("front.babysitter.filter"),
                    type: "POST",
                    headers: { "cache-control": "no-cache" },
                    async: false,
                    cache: false,
                    data: $(this).serialize(),
                    success: function (XMLHttpRequest){
                        $('.loading').hide();
                        $('.list').html(XMLHttpRequest);
                    },
                    error: function (XMLHttpRequest, textStatus) {
                        if (textStatus !== 'abort')
                        {
                            var error = "TECHNICAL ERROR: unable to send login informations \n\nDetails:\nError thrown: " + XMLHttpRequest + "\n" + 'Text status: ' + textStatus;
                            $.growl.error({ message: error});
                            return false;
                        }
                    },
                    complete : function () {
                    }
                });
                return false;
            })
        };

Answer 1

The problem is that you check query string but send a POST request via ajax.

You need to change if(empty($request->request->all())){ and $request->request->get("babysitter_search") for ajax request. Or send a GET request

The proper way will be to get data from form data, not from a request:

$form = $this->createForm(BabySitterFrontSearchType::class, null, [
    'method' => 'POST', // or GET
]);
$form->handleRequest($request);

if ($form->isSubmitted() && $form->isValid()) {
    $data = $form->getData();
    $listBabySitters = $this->babySitterRepository->findBabySitter($data["babysitter_search"]);
} else {
    $listBabySitters = $this->babySitterRepository->findBy(['status' => 1]);
}

Also in your javascript you need to use data: $(this).serializeArray()